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 = ; 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 = ; return <button =>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 = ;
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 = ;