itsy-bitsy-router
v0.2.2
Published
Small and opinionated routing solution for React
Downloads
12
Readme
Itsy bitsy router
Itsy bitsy router is a very opiniated solution for routing in react applications. It is not compatible with IE and never will be.
Install
You know the drill.
yarn add itsy-bitsy-router
Usage
You will need to declare a router before anything else with useRoutes()
.
const Router = useRoutes(
[
{ path: "/login", element: <Login /> },
{ path: "/user/:id", element: <User /> },
],
<FourOhFour />
);
return <Router />;
You can optionally pass a render
prop to the router. It is used when your app
wants a default layout component, giving the route children as the children
prop.
Navigation
To navigate inside your app using anchor links, there is still the need for a
<Link>
component,
return (
<Link to="/user/synecdokey" state={{ from: "page1" }}>
My profile
</Link>
);
Since the browser history API provides no way to listen to history.pushState()
nor history.replaceState()
at the moment, you will need useNavigate()
to
handle navigation.
const Button = () => {
const navigate = useNavigate();
return <button onClick={() => navigate("/this-url")}>Click me</button>;
};
To navigate programatically, you can use history.back()
and
history.forward()
. They will work as expected, without the need for some
useHistory()
shenanigans.
Access data
useParams()
is used for the parameters you provided in the url.
const { id } = useParams();
To access the route state, it's all in history.state
.
A useLocation()
hook is provided, it will give you every property of the
window.location
object.
const { pathname, search } = useLocation();