Migrate React Routing from v5 to v6 Step-By-Step

Learn how to how switch from v5 routing to v6 react-router-dom.

New react-router-dom Version 6

Installing React-Router-Dom

To install React Router, all you have to do is run command:-
npm install react-router-dom@latest

Set Up React Router

Make React Router to available anywhere in your application.
Let’s import BrowserRouter from react-router-dom and then wrap the root component of index.js(the App component) in it.

After making changes to the file it should look like this:-

v5 (index.js)

Before:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

v6 (index.js)

After:
If you are still using v5 ReactDOM.render() in v6 routing it is no longer supported, it is replaced by createRoot().
You may encounter the following error(in console):

react v6 routing error

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

Define your Routes

As our App component acts as a root component, This is a location where our react code gets rendered initially.
Let’s define routes, please note the things which are replaced from v5 to v6 in react-router-dom
Note: switch, Redirect, component and exact property has been removed from the react-router version 6.

switch → Routes
component → element
Redirect → useNavigate
ReactDOM.render()→ createRoot()

v5 Routing: (old)

import React from "react";
import { Route, Switch } from "react-router-dom";
import "./App.css";
import Blog from "./pages/Blog";
import Home from "./pages/Home";
const App = () => {
  return (
    <div className="container">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/blog/:id" component={Blog} />
      </Switch>
    </div>
  );
};
export default App;

v6 Routing: (new)

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import "./App.css";
import Blog from "./pages/Blog";
import Home from "./pages/Home";
const App = () => {
  return (
    <div className="container">
    <BrowserRouter>      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/blog/:id" element={<Blog />} />
      </Routes>
    <BrowserRouter>
    </div>
  );
};
export default App;

So you have learned how to use v6 routing using React.