react-simplest-router
Simplest React router using hooks
Tired of very big routers with a lot of options and documentation?
Need the absolutely simplest router?
URL Hash routers are ok with you?
Use this package
Install
npm install --save react-simplest-router
or
yarn add react-simplest-router
Usage
react-simplest-router
exports by default a hook that you can use to handle routing.
In the spirit of show-dont-tell, here's an example:
import React from "react";
import useRouter from "react-simplest-router";
import "./App.css";
const A = () => <label>A</label>;
const B = () => <label>B</label>;
const initialRoutes = [
{ location: "#A", component: A },
{ location: "#B", component: B }
];
const Picker = ({ routes, changeRoute }) => (
<div>
{routes.map(({ location, isActive }) => (
<button
key={location}
onClick={() => changeRoute(location)}
className={isActive ? "active" : "inactive"}
>
{location}
</button>
))}
</div>
);
const App = () => {
const { setRoute, routes, ActiveComponent } = useRouter(initialRoutes);
const changeRoute = newRoute => {
setRoute(newRoute);
document.location.hash = newRoute;
};
return (
<div>
<Picker changeRoute={changeRoute} routes={routes} />
<ActiveComponent />
</div>
);
};
export default App;
As you can see, useRouter
only takes in a routes array. Each route should have two properties:
-
location
to know where to go -
component
to know what to render
react-simplest-router
doesn't have ANY other functionality or API to learn. It is truly the simplest router
License
MIT © ldd