Skip to content
Branch: master
Find file History
troch Publish
 - react-router5-hocs@7.1.0
 - react-router5@7.1.0
 - redux-router5-immutable@7.0.2
 - redux-router5@7.0.2
 - router5-helpers@7.0.1
 - router5-plugin-browser@7.0.2
 - router5-plugin-listeners@7.0.2
 - router5-plugin-logger@7.0.2
 - router5-plugin-persistent-params@7.0.2
 - router5-transition-path@7.0.1
 - router5@7.0.2
 - rxjs-router5@7.0.2
 - xstream-router5@7.0.2
Latest commit 4b87915 Feb 22, 2019

README.md

npm version

react-router5

Installation

Install module `react-router5:

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

Demos and examples

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

  • BaseLink: a component to render hyperlinks. For a full list of supported props, check the source!
  • Link: Link is withRouter and BaseLink 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
You can’t perform that action at this time.