router5 / React Router5
Licence: mit
Helpers for using router5 with React [MOVED]
Stars: ✭ 82
Programming Languages
javascript
184084 projects - #8 most used programming language
Moved to router5 repository
react-router5
Higher-order components and components for React when using router5.
Installation
npm install --save react-router5
Examples
Requirements
- react >= 0.14.0
- router5 >= 2.0.0
What does this package export?
-
RouterProvider
: component -
Link
: component -
routeNode
: higher-order component -
BaseLink
: component -
withRoute
: higher-order component
How it works
RouterProvider
It will add your router instance in context.
import React from 'react';
import ReactDOM from 'react-dom';
import { RouterProvider } from 'react-router5';
import App from './App';
import router from './router';
ReactDOM.render(
<RouterProvider router={ router }><App /></RouterProvider>,
document.getElementById('app')
);
routeNode HOC
routeNode(nodeName): higher-order component to wrap a route node component.
- Specify your component node name (
''
if root node)
Note: your router needs to use listenersPlugin
from router5
.
import React from 'react';
import { routeNode } from 'react-router5';
import { UserView, UserList, NotFound } from './components';
function Users(props) {
const { previousRoute, route } = props;
switch (route.name) {
case 'users.list':
return <UserList/>;
case 'users.view':
return <UserView/>;
default:
return <NotFound/>;
};
}
export default routeNode('users')(Users);
Link component
import React from 'react';
import { Link } from 'react-router5';
function Menu(props) {
return (
<nav>
<Link routeName='home' routeOptions={{reload: true}}>Home</Link>
<Link routeName='about' routeOptions={{reload: true}}>About</Link>
</nav>
);
}
export default Menu;
The Link
component is BaseLink
and withRoute
composed together
BaseLink component
Same as Link
, except it won't mark it-self dirty (and re-render) on a route change. BaseLink
needs to be passed your router instance.
withRoute HOC
Will create a new component, injecting your router instance (from context) and the current route to the wrapped component. Any route change will trigger a re-render.
Contributing
Please read contributing guidelines on router5 repository.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].