Blazing Fast and Lightweight router for React Based on state first..
- 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
andactive
router properties. - Typescript first class, but works fine with javascript too.
- Nesting Route.
- Lazy loading for route component.
- Hooks
onEnter
andonLeave
. - Redirect.
- Route Guard.
- Automatic Browser Sync
- Isomorphic.
npm i -s rift-router
import React, {lazy} from 'react';
import ReactDOM from 'react-dom';
import { IRiftRoute, RiftProvider, RiftGate, RiftLink } from 'rift-router';
const Home = () => <div>'Home Component'</div>;
const About = () => <div>'About Component'</div>;
const routes: IRiftRoute[] = [
{ path: '/', component: <Home /> },
{ path: '/about', component: () => <About /> },
{ path: '/users', component: lazy(() => import('./users')),
];
ReactDOM.render(
<RiftProvider routes={routes} fallback={<div>loading...</div>}>
<RiftLink to="/">Home</RiftLink>
<RiftLink to="/about">About</RiftLink>
<RiftGate /> {/* render the component for current route */}
</RiftProvider>,
document.getElementById('root')
);
Check basic usage in a sandbox:
function isUserLogged() {...}
const routes = [
{
path: '/users',
component: <UserList />,
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.
const routes = [
// Default route (*) redirect to '/'
{ path: '*', onEnter: () => '/' },
// Default route keep browser url and show Home component
{ path: '*', component: <Home /> },
// Default route show Not Found Page component
{ path: '*', component: <NotFound404 /> },
];
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 <RiftGate/>
component to display current nesting component.
// somewhere in the users module/folder
export const usersRoutes = [
{
path: '',
component: React.lazy(import('./UserList')),
},
{
path: '/:id',
component: React.lazy(import('./UserDetails')),
},
];
// 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 <a href="https://reactjs.org/docs/code-splitting.html#reactlazy">here</a>
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 astring
parameter for navigate to (router.to('/users'))
Option 1: In your component use the router from RiftContext using useRouter hook.
const Home = () => {
const router = useRouter();
const toAbout = () => router.to('/about');
return (
<div>
<div>Home Component</div>
<button onClick={toAbout}>About us</button>
</div>
);
};
Option 2: In your route inject the router instance as a component
prop, same for onEnter
and onLeave
hooks
const routes: IRiftRoute[] = [
{ path: '/', component: <Home />, onEnter: router => {...} },
{ path: '/about', component: router => <About router={router} /> },
];
-
Pass your
routes
toRiftProvider
and it will create a router instance and share it throughReact.Context
to be use deep in the component tree with theuseRouter
hook.RiftProvider
also accept afallback
prop where you can provide a component to will be shown by all yoursRiftGate
while lazy components finish to load. -
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 ofRiftGate
to render the nested components in the active route. Also accept afallback
prop where you can provide a component to show while lazy components finish to load, this will override thefallback
of theRiftProvider
.
- Code Splitting.
- Server Side Rendering Example.