Skip to content

React Router v5

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
import {BrowserRouter as Router} from 'react-router-dom'

ReactDOM.render(
    <Router>
        <App>
    </Router>
, document.getElementById('app'))

<Route> and partial matching

/users/new

  • will render both Users and NewUser
  • You need a Switch if you only want one route to be rendered
    • Picks the first matching
<Route path="/users">
    <Users />
</Route>
<Route path="/users/new">
    <NewUser />
</Route>

Route's render prop

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

Prompt

Raise an alert when they try to leave

<Prompt
    when={hasUnsavedChanges()}
    message="You have unsaved changes, are you sure you want to leave?"
/>

Custom Modal Component

Hooks

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

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

useHistory

let history = useHistory();
history.push("/home");

Route's render prop

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

withRouter

Preventing transitions

https://fullchee-reminders.netlify.app/link/2070

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?


Last update: 2022-11-04