React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React.

Note- React Router v6 makes heavy use of React hooks, so you’ll need to be on React 16.8 or greater. It also introduces a few breaking changes from version 5. So be mindful before upgrading.
ex- useNavigate instead of useHistory

Upgrading from v5 to v6

Install

**For web
npm install react-router-dom@next

**for a React Native app
npm install react-router-native@next

Breaking changes —

1.  Change **Switch ** TO  **Routes** 

2\. Change  
 <Route exact path=”/”><Home /></Route>

To
<Route path=”/” element={<Home />} />

Detail - Now you can not use Switch but you have to use Routes

and the second change is

<Route exact path=”/”><Home /></Route> **will not work.**

You have to pass component with **element props** like

<Route path=”/” element={<Home />} />

**V5------------------------------------------**  
import {  
  BrowserRouter,  
  Switch,  
  Route,  
  Link,  
  useRouteMatch  
} from "react-router-dom";  

function App() {  
  return (  
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/">  
          <Home />  
        </Route>  
        <Route path="/users">  
          <Users />  
        </Route>  
      </Switch>  
    </BrowserRouter>  
  );  
}


**v6-------------------------------------------------**


import {  
  BrowserRouter,  
  Routes,  
  Route,  
  Link  
} from "react-router-dom";  

function App() {  
  return (  
    <BrowserRouter>  
      <Routes>  
        <Route path="/" element={<Home />} />  
        <Route path="users/*" element={<Users />} />  
      </Routes>  
    </BrowserRouter>  
  );  
}

3. Major change around nested routing.
here in the example, user component has been used as a nested routed

V5------------------------------------------


**// App component**`  
function App() {  
  return (  
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/">  
          <Home />  
        </Route>  
        <Route path="/users">  
          <Users />  
        </Route>  
      </Switch>  
    </BrowserRouter>  
  );  
}`


**// user component** 


function Users() {  
  return (  
    <div>  
      user component  
        **<Route path={'users/:id'}>  
          <UserProfile />  
        </Route>**  
    </div>  
  );  
}

In the above example, you can see that in the user component the nested route look like

<Route path={'users/:id'}>  
          <UserProfile />  
        </Route>

but it will not work in v6, so for v6, you have to put this inside

<Routes>  
`<Route path={':id'}>  
          <UserProfile />  
        </Route>`  
 </Routes>

and in-app routing you have to put * after user path like

<Routes>  
        <Route path="**users/***" element={<Users />} />  
      </Routes>

4. Another way of implementing Nested routes with V6

V6 also provides another way of nested route implementation where you can arrange all related routes in one place, and in the parent component you can use the Outlet component to render child routes

here in the example, the child route user profile is also placed in the same routing file

import {  
  BrowserRouter,  
  Routes,  
  Route,  
  Link  
} from "react-router-dom";  

function App() {  
  return (  
    <BrowserRouter>  
      <Routes>  
        <Route path="/" element={<Home />} />  
        <Route path="users/*" element={<Users />}> **<Route path={':id'}><UserProfile /></Route>** </Route></Routes>  
    </BrowserRouter>  
  );  
}

and in the user profile component, we will use **Outlet to render child route**

import {  
  **Outlet**  
} from "react-router-dom";


**// user component**


`function Users() {  
  return (  
    <div>  
      user component  
       `**  <Outlet />** `</div>  
  );  
}`

Note — We do not need to pass the exact prop with the route now. it will be internally understood by react-router. Ordering of routes is also not important now with v6.

**v5-------------------------------------------------**

<Switch>  
        <Route **exact** path="/">  
          <Home />  
        </Route>  
        <Route path="/users">  
          <Users />  
        </Route>  
      </Switch>  



**v6-------------------------------------------------**


<Routes>  
        <Route path="/" element={<Home />} />  
        <Route path="users/*" element={<Users />}> **<Route path={':id'}><UserProfile /></Route>** </Route></Routes>

useNavigate instead of useHistory

**v5-------------------------------------------------**  
import { **useHistory** } from "react-router-dom";

const history = useHistory();

history.push("/home");  
history.replace("/home");

for forward and backward navigation

const { go, goBack, goForward } = useHistory();

go(-2)  
`<button onClick={goBack}>Go back</button>  
<button onClick={goForward}>Go forward</button>`

**v6-------------------------------------------------**  
import { **useNavigate**} from "react-router-dom";  
 const navigate = useNavigate();  
 navigate("/home");  
  navigate("/home", { replace: true });

for forward and backward navigation

const navigate = useNavigate();

navigate(-2)  
navigate(-) `<button onClick={() => navigate(-1)}>Go back</button>  
  <button onClick={() => navigate(1)}>Go forward</button>`

activeClassName and activeStyle props have been removed

the activeClassName and activeStyle props have been removed from NavLinkProps. to check the active link, you have to pass a function and have to add the class explicitly. It provides more control.

<NavLink className={**(navData)=> navData.isActive :'active':''**}  to="/">Link</NavLink>

Redirect has been removed

Redirect component has been removed in v6.

**Replace this** 

<Redirect from="about" to="about-us" />

**By this**  

`import { Navigate } from "react-router-dom";  
<Route path="/" element={<Navigate to="/home" replace />} />`


or for posuhing in history  
<Route path="/" element={<Navigate to="/home" />} />

Prompt has been removed

Prompt component has also been removed without any other component as backup or replacement. So be mindful with upgrading if you have huge use cases for this component. because till any replacement is provided, you have to write down your own custom code.

Thanks for learning… 👏👏👏