react-router5
Installation
Install module `react-router5:
yarn add react-router5# or npm install --save react-router5
Demos and examples
Provider
- RouterProvider: adds your router instance and router state in context.
const AppWithRouter = <RouterProvider router=router> <App /> </RouterProvider>
Connecting components
You can connect your components using three different methods:
- Higher-order components:
withRouter
,withRoute
androuteNode
- Render props:
Router
,Route
andRouteNode
- Hooks:
useRouter
,useRoute
anduseRouteNode
HoC | Render prop | Hook | |
---|---|---|---|
Use your router instance | withRouter |
Router |
useRouter |
Connect to routing state | withRoute |
Route |
useRoute |
Connect to a route node | routeNode |
RouteNode |
useRouteNode |
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-renders on a route changes.
{ return <nav> <Link routeName="home">Home</Link> <Link routeName="about">About</Link> </nav> }