With React
Install module `react-router5:
yarn add react-router5
# or
npm install --save react-router5
- 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
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: a component to render hyperlinks. For a full list of supported props, check the source!
Link
iswithRoute
andLink
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
Last modified 3yr ago