Connect your Preact components up to that address bar.
preact-router provides a
<Router /> component that conditionally renders its children when the URL matches their
path. It also automatically wires up
<a /> elements to the router.
💁 Note: This is not a preact-compatible version of React Router.
preact-routeris a simple URL wiring and does no orchestration for you.
If you're looking for more complex solutions like nested routes and view composition, react-router works great with preact as long as you alias in preact-compat. React Router 4 even works directly with Preact, no compatibility layer needed!
;;/** @jsx h */const Main =<Router><Home path="/" /><About path="/about" />// Advanced is an optional query<Search path="/search/:query/:advanced?" /></Router>;;
If there is an error rendering the destination route, a 404 will be displayed.
💁 Pages are just regular components that get mounted when you navigate to a certain URL.
Any URL parameters get passed to the component as
Defining what component(s) to load for a given URL is easy and declarative.
You can even mix-and-match URL parameters and normal
You can also make params optional by adding a
? to it.
<Router><A path="/" /><B path="/b" id="42" /><C path="/c/:id" /><C path="/d/:optional?/:params?" /><D default /></Router>
Lazy loading (code splitting) with
preact-router can be implemented easily using the AsyncRoute module:
;<Router><Home path="/" /><AsyncRoutepath="/friends"component= import'./friends'/><AsyncRoutepath="/friends/:id"component= import'./friend'loading= <div>loading...</div>/></Router>
preact-router includes an add-on module called
match that lets you wire your components up to Router changes.
Here's a demo of
<Match>, which invokes the function you pass it (as its only child) in response to any routing:
;;// another example: render only if at a given URL:
<Link> is just a normal link, but it automatically adds and removes an "active" classname to itself based on whether it matches the current URL.
Can easily be impleted with a custom
Now to create a redirect within your application, you can add this
Redirect component to your router;
<Router><Bar path="/bar" /><Redirect path="/foo" to="/bar" /></Router>