React Router V6

Upgrading to V6:

No need for arrangement react router v6
The Redirect component was removed and replaced with the Navigate component
Nested routes is changed
Navlink activeClassName replaced
There is no longer { useHistory } kind of thing in react-router-dom v6.
params is changed
exact is removed

1- Switch is replaced with Routes.

The arrangement of the content did not matter

<Route path="/" exact component={Home}/>

<Route path="/" exact element={<Home/>} />

Nested Routes : V5

//App.js

<Route path="/about">
      <About/>
</Route>


// About.js
...                
return (

   <h1>hello</h1> 
   <p>Alex</p>
   <Route path="/about/hello">

     </Route>
)

Nested Routes : V6

// About.js
<p>hello</p>
<Routes>
   <Route path="hello" element={<div>...</div>}/>
</Routes>


//App.js
<Routes>
   <Route path="/about/*" element={<About/>}>
</Routes>

Nested Routes : V6

//App.js

<Routes>
  <Route path="/about/*" element={About}>
    <Route path="hello" element={<div>..</div>}/>
  </Route>
<Routes/>



//About.js
import {outlet} from 'react-router-dom';

<p>hello</p>
<h1>alex</h1>
<Outlet/>

Nested Routes : V6 ex3

//App.js
<Routes>
  <Route path="/about" element={About}>
    <Route path="add-new" element={<addnew/>}/>
  </Route>    
<Routes/>



//About.js:
import {outlet} from 'react-router-dom';

<p>hello</p>
<NavLink to="add-new">add New</NavLink>
<outlet/>

Redirect V5

<Route path="/hi">
   <Redirect to="/about"/>
</Route>

in V6

Redirect is replaced with Navigate

import {Navigate} from 'react-router-dom';

<Route path="/hi" element={<Navigate to="/about"/}>

navigate("/Hello");
//or 
navigate("/Hello", {replace:true} );

 // or goback
navigate(2) or 1 , -1 ,

// instead of 

 history.push("/Hello");

<button onClick={() => navigate('contact')}>Add User</button>

NavLink V5

<NavLink activeClassName="active" exact to="/" >
      Home
</NavLink>


// V6

<NavLink className={ (ndata) =>ndata.isActive && 'active' } exact to="/">
   Home
</NavLink>

Params

const params = useParams();

match.params.id 
  // is replaced by
    params.id

Error - no match

//V5

<Route path="*" >
          <NotFound />
        </Route>


//V6


<Route path="*"  element={<NotFound/>}>

Prompt V5

<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

Update:

Prompt, usePrompt and useBlocker have been removed from react-router-dom. This answer will not currently work, though this might change.

exact is removed from V6

If you want that old behavior of matching the start of a path only, you can still get that by adding /* after your path. Once you add that, this route will become active if a URL path starts with /products instead of being only /products

<Route path='/products' exact component={<Products/>}>

now =>

<Route path='/products/*' element={<Products/>} />

Though to be precise, if we just add it like this, what we will actually do is we will push a navigation to this page onto the navigation stack. If we truly want to redirect, so replace the current page with the new page, then we would have to add the replace prop to Navigate as well. And this would then be the full replacement for the old redirect component. But you could also just configure it like this to just push the new page, instead of replacing the current page. With that, this error goes away. And as you see, if I now enter just slash, I am redirected to welcome.

<Route path="/" element={<Navigate to="/welcome" replace />} />