With React
Installation
Install module `react-router5:
1
yarn add react-router5
2
# or
3
npm install --save react-router5
Copied!
Demos and examples
Provider
- RouterProvider: adds your router instance and router state in context.
1
const AppWithRouter = (
2
<RouterProvider router={router}>
3
<App />
4
</RouterProvider>
5
)
Copied!
Connecting components
You can connect your components using three different methods:
- Higher-order components:
withRouter,withRouteandrouteNode - Render props:
Router,RouteandRouteNode - Hooks:
useRouter,useRouteanduseRouteNode
​
HoC
Render prop
Hook
Use your router instance
withRouterRouteruseRouterConnect to routing state
withRouteRouteuseRouteConnect to a route node
routeNodeRouteNodeuseRouteNodeLink components
- Link: a component to render hyperlinks. For a full list of supported props, check the source!
LinkiswithRouteandLinkcomposed together - ConnectedLink: same as
Link, except it re-renders on a route changes.
1
import React from 'react'
2
import { Link } from 'react-router5'
3
​
4
function Menu(props) {
5
return (
6
<nav>
7
<Link routeName="home">Home</Link>
8
​
9
<Link routeName="about">About</Link>
10
</nav>
11
)
12
}
13
​
14
export default Menu
Copied!
Last modified 2yr ago