https://github.com/kitze/react-tiniest-router
The tiniest router for React, built with hooks
https://github.com/kitze/react-tiniest-router
Last synced: 3 months ago
JSON representation
The tiniest router for React, built with hooks
- Host: GitHub
- URL: https://github.com/kitze/react-tiniest-router
- Owner: kitze
- Created: 2019-06-20T07:50:09.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-25T15:05:10.000Z (about 3 years ago)
- Last Synced: 2025-04-13T13:08:05.678Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-tiniest-router-demo-pejt4
- Size: 961 KB
- Stars: 106
- Watchers: 2
- Forks: 3
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🐁 react-tiniest-router
For the times when you *really* need a simple router.
Based on [mobx-router](https://github.com/kitze/mobx-router) and [rttr](https://github.com/kitze/rttr).
## Usage
1. Write the routes object.
```js
const routes = {
home: {
id: 'home',
path: '/',
},
about: {
id: 'about',
path: '/about',
},
gallery: {
id: 'gallery',
path: '/gallery/:imageId',
},
}
```
2. Wrap your app with the Router component
```js
```
3. Use the router using `useRouter`
- Use the `goTo` function for navigating to a route
- Use the `isRoute` function for checking if a route is currently active
```js
const Root = () => {
const {goTo, isRoute} = useRouter();
return (
goTo(routes.home)}>go home
goTo(routes.about)}>go to about
goTo(routes.gallery, { imageId: 1 })}>
go to picture 1
goTo(routes.gallery, { imageId: 2 })}>
go to picture 2
goTo(routes.gallery, { imageId: 3 })}>
go to picture 3
{isRoute(routes.home) &&
Welcome home}
{isRoute(routes.about) && About us}
{isRoute(routes.gallery) && }
);
};
```
4. You also get `params`, `queryParams`, `routeId`, `path` in the router object.
```js
const Gallery = () => {
const { params } = useRouter();
return
Browsing picture {params.imageId};
};
```
---
## FAQ
- Does it support optional parameters in the path definition?
Not yet, but it will as soon as I need them in a project.
- Does it support SSR?
No.
- Will it ever support SSR?
NO.
- Does it have tests?
TypeScript is poor man's tests.
- Will it ever have tests?
If you write them.
- Does it support code splitting?
Did you see which repo you're actually browsing?
Does it say "facebook" in the url? No. So, no.
- Does it support async routes?
Please stop doing stupid stuff with your router.
- Does it support protected routes?
Please stop doing stupid stuff with your router.
- I'm offended by this FAQ section, where can I complain?
Yell @ me on [Twitter](https://twitter.com/thekitze)
### 🙋♂️ Made by [@thekitze](https://twitter.com/thekitze)
- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops
- 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM
- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps
- 📹 [Vlog](https://youtube.com/kitze) - Watch my sad developer life