Skip to content

React Router v5

[[React Router v6]]

Why React Router?

  • client side routing
    • go to another page
    • render a page given a URL
  • also do server side rendering (with Remix or Next.js)

Philosophy and Intro

uidotdev: React Router v5: Philosophy and Introduction

What is BrowserRouter?

  • Parent component
  • can pass routing props to any component
    • uses React Context


Route always has to render something

<Route path="/"
    <Dashboard />
  • children or render prop if there's a match
  • null if no match
import {BrowserRouter as Router} from 'react-router-dom'

, document.getElementById('app'))

<Route> and partial matching


  • will render both Users and NewUser
<Route path="/users">
    <Users />
<Route path="/users/new">
    <NewUser />

Route's render prop

    render={({ match }) => (
      <React.Suspense fallback={<>...</>}>
        <Component id={parseInt(match.params?.id, 10)} />

Optional param

How to Add Optional Path Parameter with React Router v5

<Route exact path="/route1/" component={MyComp} />,
<Route exact path="/route1/:optionalParam" component={MyComp} />,
<Route exact path="/route1/:optionalParam?" component={MyComp} />,


render the first <Route> that matches

let routes = (
    <Route exact path="/">
      <Home />
    <Route path="/about">
      <About />
    <Route path="/:user">
      <User />
      <NoMatch />

Protected Routes

Protected routes and authentication with React Router v5

You can create your own Routes

function PrivateRoute({ children, }) {
  return (
      render={() => {
        return fakeAuth.isAuthenticated === true ? (
        ) : (
          <Redirect to="/login" />


Raise an alert when they try to leave

    message="You have unsaved changes, are you sure you want to leave?"

Custom Modal Component


Why withRouter HOC?

Before withRouter

  1. You passed in a component to Route
  2. Route would create a HOC and pass props history, match, location to your component 3. so you can history.push("new/path")
import { Route } from "react-router-dom";
<Route path="/path" component={MyComponent} />;

Some components (example: Header) are in every page

  • can't wrap with a Route
import { withRouter } from "react-router-dom";

export default withRouter(Header);

gives <Header /> access to the props

  • history
  • match
  • location

Now they have their own hooks!

Why isn't history.push() changing the page?

we don't have a router wrapped around the component?

How to access history?


let history = useHistory();

Route's render prop

<Route render={({history}) => <MyComponent history={history}} /> />


Preventing transitions

Relative URLs

/configurator/1/.. --> 404

  • theory: would resolve to /configurator
  • actual: just checks for /configurator/1/..
    • it doesn't do a path.resolve
  • need to route to /configurator with exact

I think it should be supported tho?

Internal links only 😢

External links need to use <a>

We had a <Link> component that would use <Link /> or <a> if the href was external

Last update: 2023-04-24