Install module `react-router5:
yarn add react-router5# ornpm install --save react-router5
​Codesandbox link​
RouterProvider: adds your router instance and router state in context.
const AppWithRouter = (<RouterProvider router={router}><App /></RouterProvider>)
You can connect your components using three different methods:
Higher-order components: withRouter
, withRoute
and routeNode
Render props: Router
, Route
and RouteNode
Hooks: useRouter
, useRoute
and useRouteNode
​ | HoC | Render prop | Hook |
Use your router instance |
|
|
|
Connect to routing state |
|
|
|
Connect to a route node |
|
|
|
Link: a component to render hyperlinks. For a full list of supported props, check the source! Link
is withRoute
and Link
composed together
ConnectedLink: same as Link
, except it re-renders on a route changes.
import React from 'react'import { Link } from 'react-router5'​function Menu(props) {return (<nav><Link routeName="home">Home</Link>​<Link routeName="about">About</Link></nav>)}​export default Menu