router5
  • Read Me
  • Introduction
    • Why router5?
    • Getting Started
    • Ecosystem
    • Core concepts
    • Transition phase
  • Guides
    • Defining routes
    • Path Syntax
    • Router options
    • Navigating
    • In the browser
    • Observing state
  • Integration
    • With React
    • With Redux
  • Advanced
    • Plugins
    • Middleware
    • Preventing navigation
    • Errors and redirections
    • Dependency injection
    • Loading async data
    • Universal routing
    • Listeners plugin
  • API Reference
  • Migration
    • Migrating from 7.x to 8.x
    • Migrating from 6.x to 7.x
    • Migrating from 5.x to 6.x
    • Migrating from 4.x to 5.x
    • Migrating from 3.x to 4.x
    • Migrating from 2.x to 3.x
    • Migrating from 1.x to 2.x
    • Migrating from 0.x to 1.x
Powered by GitBook
On this page
  • Installation
  • Demos and examples
  • Provider
  • Connecting components
  • Link components
  1. Integration

With React

PreviousIntegrationNextWith Redux

Last updated 5 years ago

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

  • 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
Codesandbox link