preact-router
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:
preact-router
is simple and does not do orchestration for you. If you're looking for more complex solutions like nested routes and view composition, react-router works with preact as long as you alias in preact-compat.
See a Real-world Example ➡️
Usage Example
;;/** @jsx h */ const Main = <Router> <Home path="/" /> <About path="/about" /> <Search path="/search/:query" /> </Router>; ;
If there is an error rendering the destination route, a 404 will be displayed.
Handling URLS
💁 Pages are just regular components that get mounted when you navigate to a certain URL.
Any URL parameters get passed to the component as props
.
Defining what component(s) to load for a given URL is easy and declarative.
You can even mix-and-match URL parameters and normal props
.
<Router> <A path="/" /> <B path="/b" id="42" /> <C path="/c/:id" /> <D default /></Router>