Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Cervantes007/rift-router
Blazing Fast and Lightweight router for reactjs based on state first
https://github.com/Cervantes007/rift-router
Last synced: 12 days ago
JSON representation
Blazing Fast and Lightweight router for reactjs based on state first
- Host: GitHub
- URL: https://github.com/Cervantes007/rift-router
- Owner: Cervantes007
- Created: 2018-05-21T20:22:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:14:34.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T09:22:40.349Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 633 KB
- Stars: 12
- Watchers: 4
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-blazingly-fast - rift-router - Blazing Fast and Lightweight router for reactjs based on state first (TypeScript)
README
# rift-router  [](https://github.com/prettier/prettier) [](https://travis-ci.org/Cervantes007/rift-router) [](https://codecov.io/gh/Cervantes007/rift-router)
Blazing Fast and Lightweight router for React Based on state first..
## Features
- Lightweight 1.8kb (min/gzip) - 5kb (min)
- No Dependencies
- Blazing Fast update app state first and then Browser Sync.
- Useful route information in `params`, `search`, `path` and `active` router properties.
- Typescript first class, but works fine with javascript too.
- Nesting Route.
- Lazy loading for route component.
- Hooks `onEnter` and `onLeave`.
- Redirect.
- Route Guard.
- Automatic Browser Sync
- Isomorphic.
## Installation
`npm i -s rift-router`
## Usage
```typescript
import React, {lazy} from 'react';
import ReactDOM from 'react-dom';
import { IRiftRoute, RiftProvider, RiftGate, RiftLink } from 'rift-router';
const Home = () =>
'Home Component';
const About = () => 'About Component';
const routes: IRiftRoute[] = [
{ path: '/', component: },
{ path: '/about', component: () => },
{ path: '/users', component: lazy(() => import('./users')),
];
ReactDOM.render(
loading...}>
Home
About
{/* render the component for current route */}
,
document.getElementById('root')
);
```
Check basic usage in a sandbox:
[](https://codesandbox.io/s/myq5nowwwp)
#### and that's it, try it.
## Routes object options.
#### Using Hooks:
```typescript
function isUserLogged() {...}
const routes = [
{
path: '/users',
component: ,
onLeave: () => '...Do some logic when current route will change',
onEnter: () => {
if(!isUserLogged()) {
return '/login';
}
}
}
]
```
`onEnter` run just before set new route, therefore it can be used as route Guard, if `onEnter` return an string value, the router will redirect to this value.
#### Handle route not match
```typescript
const routes = [
// Default route (*) redirect to '/'
{ path: '*', onEnter: () => '/' },
// Default route keep browser url and show Home component
{ path: '*', component: },
// Default route show Not Found Page component
{ path: '*', component: },
];
```
#### Nesting routes
```typescript
const routes: IRiftRoute[] = [
{
path: '/admin',
component: () => 'admin',
children: [
{
path: '/users',
component: () => 'users',
},
{
path: '/users/:id?',
component: () => 'users editor',
},
],
},
];
```
`note:` For each nesting you must place a `` component to display current nesting component.
#### Building your routes with many files and lazy loading components.
```typescript
// somewhere in the users module/folder
export const usersRoutes = [
{
path: '',
component: React.lazy(import('./UserList')),
},
{
path: '/:id',
component: React.lazy(import('./UserDetails')),
},
];
```
```typescript
// building your routes with others routers files.
const routes: IRiftRoute[] = [
{
path: '/users',
children: usersRoutes,
},
];
```
Lazy loading your component will reduce the first load time, therefore your page will be show faster, then other component will be load in demand.
Caveat: `React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app check here`
### `router` instance API:
- `path` (show current path - `router.path` -> '/users')
- `params` (for path = `/users/:id` - current route = 'users/5' -> `router.params` = `{id: 5}`)
- `search` (for route = `/users?from=home` -> `router.search` = `{from: "home"}`)
- `to` function receive a `string` parameter for navigate to (router.to('/users'))
## How to get router object
Option 1: In your component use the router from RiftContext using useRouter hook.
```typescript
const Home = () => {
const router = useRouter();
const toAbout = () => router.to('/about');
return (
Home Component
About us
);
};
```
Option 2: In your route inject the router instance as a `component` prop, same for `onEnter` and `onLeave` hooks
```typescript
const routes: IRiftRoute[] = [
{ path: '/', component: , onEnter: router => {...} },
{ path: '/about', component: router => },
];
```
## How it Work.
1. Pass your `routes` to `RiftProvider` and it will create a router instance and share it through `React.Context` to be use deep in the component tree
with the `useRouter` hook.
`RiftProvider` also accept a `fallback` prop where you can provide a component to will be shown by all yours `RiftGate` while lazy components finish to load.
2. `RiftGate` works as a gateway to show the correct component for the active route. If you have nesting routes you must
use the same number of `RiftGate` to render the nested components in the active route. Also accept a `fallback` prop
where you can provide a component to show while lazy components finish to load, this will override the `fallback` of the `RiftProvider`.
## TODO:
#### Add Documentation for
- [x] Code Splitting.
- [ ] Server Side Rendering Example.