Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@hyperapp/router
Advanced tools
Hyperapp Router provides declarative routing for Hyperapp using the History API.
import { h, app } from "hyperapp"
import { Link, Route, location } from "@hyperapp/router"
const Home = () => <h2>Home</h2>
const About = () => <h2>About</h2>
const Topic = ({ match }) => <h3>{match.params.topicId}</h3>
const TopicsView = ({ match }) => (
<div key="topics">
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/single-state-tree`}>Single State Tree</Link>
</li>
<li>
<Link to={`${match.url}/routing`}>Routing</Link>
</li>
</ul>
{match.isExact && <h3>Please select a topic.</h3>}
<Route parent path={`${match.path}/:topicId`} render={Topic} />
</div>
)
const state = {
location: location.state
}
const actions = {
location: location.actions
}
const view = state => (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route path="/" render={Home} />
<Route path="/about" render={About} />
<Route parent path="/topics" render={TopicsView} />
</div>
)
const main = app(state, actions, view, document.body)
const unsubscribe = location.subscribe(main.location)
npm i @hyperapp/router
Then with a module bundler like Rollup or Webpack, use as you would anything else.
import { Link, Route, Switch, Redirect, location } from "@hyperapp/router"
If you don't want to set up a build environment, you can download Hyperapp Router from a CDN like unpkg.com and it will be globally available through the window.hyperappRouter object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.
Add the location
module to your state and actions and start the application.
const state = {
location: location.state
}
const actions = {
location: location.actions
}
const main = app(
state,
actions,
(state, actions) => <Route render={() => <h1>Hello!</h1>} />,
document.body
)
Then call subscribe
to listen to location change events.
const unsubscribe = location.subscribe(main.location)
Render a component when the given path matches the current window location. A route without a path is always a match. Routes can have nested routes.
<Route path="/" render={Home} />
<Route path="/about" render={About} />
<Route parent path="/topics" render={TopicsView} />
The route contains child routes.
The path to match against the current location.
The component to render when there is a match.
Rendered components are passed the following props.
const RouteInfo = ({ location, match }) => (
<div>
<h3>Url: {match.url}</h3>
<h3>Path: {match.path}</h3>
<ul>
{Object.keys(match.params).map(key => (
<li>
{key}: {match.params[key]}
</li>
))}
</ul>
<h3>Location: {location.pathname}</h3>
</div>
)
The window location.
The matched part of the url. Use to assemble links inside routes. See Link.
The route path.
Indicates whether the given path matched the url exactly or not.
Use the Link component to update the current window location and navigate between views without a page reload. The new location will be pushed to the history stack using history.pushState
.
const Navigation = (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
)
The link's destination url.
Use the Redirect component to navigate to a new location. The new location will override the current location in the history stack using history.replaceState
.
const Login = ({ from, login, redirectToReferrer }) => props => {
if (redirectToReferrer) {
return <Redirect to={from} />
}
return (
<div>
<p>You must log in to view the page at {from}.</p>
<button
onclick={() => {
auth.authenticate(userId => login(userId))
}}
>
Log in
</button>
</div>
)
}
The redirect's destination url.
Overwrite the previous pathname. See location.previous.
Use the Switch component when you want to ensure only one out of several routes is rendered. It always renders the first matching child.
const NoMatchExample = (
<Switch>
<Route path="/" render={Home} />
<Route
path="/old-match"
render={() => <Redirect from="/old-match" to="/will-match" />}
/>
<Route path="/will-match" render={WillMatch} />
<Route render={NoMatch} />
</Switch>
)
Same as window.location.pathname.
The previous location.pathname. Useful when redirecting back to the referrer url/pathname after leaving a protected route.
Navigate to the given url.
Hyperapp Router is MIT licensed. See LICENSE.
FAQs
Declarative routing for Hyperapp V1 using the History API.
We found that @hyperapp/router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.