README
🛣🛣 React Mega Router 🛣🛣
Yet another React router. But this one has multi-columns, hooks and animations, built-in.
Features
✅ Multi-columns, aka nested side-by-side routes (cols
prop)
✅ Enter hook (onEnter
prop or onEnter
route attribute)
✅ Leave async blockable hook (onLeave
prop or onLeave
route attribute)
✅ Browser, Hash or Memory history (memory
, hash
and historyParams
props)
✅ Animation classNames: will-enter
, entering
, direction-forward
, direction-backward
, direction-same
, col-1
, col-2
, cols-2
, ...
✅ Link component with automatic active
className
Demo
Install
Via NPM:
npm install react-mega-router --save
Via Yarn:
yarn add react-mega-router
Basic Usage
import Router from 'react-mega-router';
import { PageFoo, PageBar, PageMoien } from './pages';
const demoRoutes = [
{
path: '/foo',
component: PageFoo,
onEnter: (route, history, action) => console.log('Just entered!'),
onLeave: (route, history) => console.log('Should I block the navigation?'),
onMount: params => console.log('mounted!', params),
routes: [
{
path: '/foo/:bar',
component: PageBar
}
]
},
{
path: '/moien',
component: PageMoien
}
];
const App = props => {
return <Router routes={demoRoutes} cols={2} />;
};
Router props
Property | Type | Required | Description |
---|---|---|---|
routes | array | true | Array of Route (details below) |
cols | integer | false | Number of visible columns |
onEnter | function | false | Triggered by (any) route entering (route, history, actionlocation, action, )=>{} |
onLeave | function | false | Triggered by (any) route leaving async (route, history)=>{} , returns false to deny navigation |
onMount | function | false | Triggered when component is ready |
animate | boolean | false | False to disable animation classNames |
path | string | false | Forced router path, ignoring history |
notFound | react element | false | Not found route fallback |
memory | boolean | false | use memoryHistory instead of browserHistory |
hash | boolean | false | use hashHistory instead of browserHistory |
historyParams | object | false | pass params to createHistory |
Route attributes
Property | Type | Required | Description |
---|---|---|---|
path | string | true | path (url-pattern format) |
component | React Component | true | Number of visible columns |
routes | array | false | Sub routes |
onEnter | function | false | Triggered by route entering |
onLeave | function | false | Triggered by route leaving async (route, history)=>{} , returns false to block navigation |
animation | string | false | Animation className, false to disabled |
{...} | - | false | Any other props that needs to be passed to component |
Route component passed props
Property | Type | Description |
---|---|---|
history | history | History object |
col | integer | Current column |
cols | integer | Columns count |
path | string | Current path |
router | object | Router props |
{...} | - | Any other route attributes |
Advanced Usage: external navigation Links
The history can be externalized using HistoryProvider
.
This can be useful to use Link components outside of the Router:
import Router, { HistoryProvider, Link } from 'react-mega-router';
//const demoRoutes = ...
const App = props => {
return (
<HistoryProvider>
<Router routes={demoRoutes} cols={2} />
<nav>
<Link href="/route1">Route 1</Link>
<Link href="/route1/foobar">Route 1 sub</Link>
</nav>
</HistoryProvider>
);
};