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, withRoute and routeNode
  • Render props: Router, Route and RouteNode
  • Hooks: useRouter, useRoute and useRouteNode
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

  • 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.
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 1yr ago