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

New react-router-dom Version 6
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")
);
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

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;
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;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store