README
react-router5-hocs
This package is the old react-router5
package: it contains components using React old context API.
For React the new context API (HoCs, hooks and render props), see react-router5
Installation
Install module `react-router5-hocs:
yarn add react-router5-hocs
# or
npm install --save react-router5-hocs
Higher-order components
- RouterProvider: adds your router instance in context.
const AppWithRouter = (
<RouterProvider router={router}>
<App />
</RouterProvider>
)
- withRoute(BaseComponent): HoC injecting your router instance (from context) and the current route to the wrapped component. Any route change will trigger a re-render
- routeNode(nodeName)(BaseComponent): like above, expect it only re-renders when the given route node is the transition node. When using
routeNode
components, make sure to key the ones which can render the same components but with different route params. - withRouter: HoC injecting your router instance only (from context) to the wrapped component.
import React from 'react'
import { routeNode } from 'react-router5-hocs'
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 components
- BaseLink: a component to render hyperlinks. For a full list of supported props, check the source!
- Link:
Link
iswithRouter
andBaseLink
composed together - ConnectedLink: same as
Link
, except it re-render on route changes
import React from 'react'
import { Link } from 'react-router5-hocs'
function Menu(props) {
return (
<nav>
<Link routeName="home">Home</Link>
<Link routeName="about">About</Link>
</nav>
)
}
export default Menu