aweary / preact-router

:earth_americas: URL router for Preact.

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

import Router from 'preact-router';
import { h } from 'preact';
/** @jsx h */

const Main = () => (
	<Router>
		<Home path="/" />
		<About path="/about" />
		<Search path="/search/:query" />
	</Router>
);

render(<Main />, document.body);

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>

---

License

MIT