How to Using React Routing Navigate instead Redirect in react-router-dom v6

Question

I saw this in a tutorial

In the Navigation Component

<li><NavLink to='/'>Home</NavLink></li>

In another Component

import Navigation from './Headers/Navigation' 
import Home from './Body/Home'
<Navigation />   
<Switch>
<Route path='/' exact component={Home} />
<Redirect from ='/' to='/Home'/>
<Switch />

I tried to learned the latest update and tried the above code by :

<Routes>
<Route path='/' element={<Navigate to='/Home' />} />
<Routes>

But what I really want doesn't work

Drew Reese · Accepted Answer · 2021-12-30 17:11:17Z

4

You still need to render the route you are redirecting to. Note that for the redirect to work correctly in the Switch component the Home component needs to render on a path other than "/" otherwise Home will match and render and the Redirect will never be reached.

v5

<Switch>
  <Route path='/home' component={Home} />
  <Redirect from ='/' to='/home'/>
<Switch />

v6

<Routes>
  <Route path='/home' element={<Home />} />
  <Route path='/' element={<Navigate to='/home' replace />} />
<Routes>

answered Dec 30, 2021 at 17:11

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rakesh · Accepted Answer · 2021-12-30 15:13:23Z

2

Try this

...
<Route path='*' element={<Navigate to='/Home' />} />
...

answered Dec 30, 2021 at 15:13

Rakesh

1652 silver badges10 bronze badges

2 Comments

JN Jony Hossain Over a year ago

It's not working

Rakesh Over a year ago

You are talking about the default route, right? I mean the default route when the requested route is not present in your routes.

Collectives™ on Stack Overflow

How to Using React Routing Navigate instead Redirect in react-router-dom v6

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related