This is what my app looked like after working through a Dependabot generated version bump of react-router-dom v5.

As to be expected with major version upgrades, there are significant changes in v6 that will affect your app's router and routes.

This article is a soft introduction into upgrading your app to v6 from the perspective of what I did to fix my own app, and may not cover all use cases. Check out React Router's full release notes.

Below is an example of a simple react-router-dom v5 router.

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Nav from './components/nav'
import Home from './views/home'
import Dash from './views/dash'
import Profile from './views/profile'

const App = () => {
  return (
    <>
      <Nav />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/dash" component={Dash} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </>
  )
}

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

Here's the same router in v6.

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Nav from './components/nav'
import Home from './views/home'
import Dash from './views/dash'
import Profile from './views/profile'

const App = () => {
  return (
    <>
      <Nav />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/dash" element={<Dash />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </>
  )
}

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

The most obvious change is the replacement of Switch with Routes.

The Route component's component prop has been replaced with element, as well as the syntax used between the curly braces, with target elements being referenced using the self-closing tag format.

I hope this article helps someone save some time when encountered with the dreaded white screen of death.

That's it. Go be essential.