Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/graywolftech/little-react-router
A little router for your React project.
https://github.com/graywolftech/little-react-router
react router routing
Last synced: 21 days ago
JSON representation
A little router for your React project.
- Host: GitHub
- URL: https://github.com/graywolftech/little-react-router
- Owner: graywolftech
- License: mit
- Created: 2021-01-15T12:04:53.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-25T16:49:16.000Z (about 4 years ago)
- Last Synced: 2024-12-23T12:37:07.881Z (about 2 months ago)
- Topics: react, router, routing
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/little-react-router
- Size: 95.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# little-react-router
A little router for your React project.
Re-implementation of [react-tiniest-router](https://github.com/kitze/react-tiniest-router) with several improvements.
## Installation
```
npm install little-react-router
```
## Usage
1. Write the routes object.
```js
// routes.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
// index.jsx or main.jsx or wherever your entrypoint is located
import { Router } from 'little-react-router';
import { routes } from './routes';
import { App } from './App';
;
```
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
// In App.jsx
import React from 'react';
import { useRouter } from 'little-react-router';
export default () => {
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) ? (
) : (
This is a 404
)}
);
};
```
4. You also get `params`, `queryParams`, `routeId`, `path` in the router object.
```js
const Gallery = () => {
const { params } = useRouter();
return
Browsing picture {params.imageId};
};
```
5. Use modifiers to create special parameters.
```js
// in routes.js
const routes = {
zeroOrMore: {
id: 'zeroOrMore',
// Matches "/", "/hi" and "/hi/ciao"
path: '/:foo*',
},
oneOrMore: {
id: 'oneOrMore',
// Matches "/hola" and "/hola/hallo" but not "/"
path: '/:bar+',
},
optional: {
id: 'optional',
// Matches "/" or "/bonjour"
path: '/:bar?',
},
emptyString: {
id: 'emptyString',
// qux matches an empty string meaning "/hi/hello" and "//hello" would both match
// This is a special modifier that is implemented in this library and not in `path-to-regexp`
path: '/:qux@/:quuz',
},
};
```
> See [path-to-regexp](https://github.com/pillarjs/path-to-regexp) for more details.
5. Prevent navigation using the `onBeforeNavigate` function. This even prevents page reloads.
```jsx
// In App.jsx
import React from 'react';
import { useRouter } from 'little-react-router';
export default () => {
const { routeId, onBeforeNavigate } = useRouter();
useEffect(
() =>
onBeforeNavigate(() =>
someCondition() ? 'Are you sure you want to leave?' : undefined
),
[]
);
// SNIP
};
```