Installation

Install module `react-router5:

yarn add react-router5
# or
npm install --save react-router5

Demos and examples

• Higher-order components: https://stackblitz.com/edit/react-router5-new-context-api​

• Render props: https://stackblitz.com/edit/react-router5-new-context-api​

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 and routeNode

• Render props: Router, Route and RouteNode

• Hooks: useRouter, useRoute and 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.

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