CODEWITHSUNDEEP
reactjsreact-router-dom
David
David

Reputation: 528

How do I use react router v6 to switch between components on one parent component

I am building a react app and have react-router v6 installed. My challenge is switching between components within a parent component. My structure is as follows.

App.js -> Rootpage.js -> AuthPage.js -> (Register.js | SignIn.js | PasswordRecover.js)

The RootPage is where I want to nest various other parts of the app like Dashboard, UserList etc.

The AuthPage should be able to switch between SignIn, Register and PasswordRecover depending on the route. I have tried the following code on my Auth page

    <div className="auth">
        <div className="auth-left">
            <Routes>
                <Route path='/signin' element = { <SignIn /> } />
                <Route path='/signup' element = { <SignUp /> } />
                <Route path='/recovery' element = { <PasswordRecovery /> } />
            </Routes>
        </div>
        <div className="auth-right">
            <img src="./assets/image.png" alt="" />
        </div>
    </div>

and this on my RootPage

    <div className='root-page'>
        <Routes>
            <Route path='/' element = { <Auth /> } />
        </Routes>
    </div>

Nothing seems to work. With v5 I would simply use switch and it would work.

Anyone know how to work this out?

Thanks.

Upvotes: 6

Views: 20680

Answers (1)

Drew Reese
Drew Reese

Reputation: 203466

In RRDv6 route path matching is now always exactly matched. If the Auth component is rendering sub-routes then it should specify a wildcard * path suffix.

You'll only need the trailing * when there is another <Routes> somewhere in that route's descendant tree. In that case, the descendant <Routes> will match on the portion of the pathname that remains.

<div className='root-page'>
  <Routes>
    <Route path='/*' element={<Auth />} />
  </Routes>
</div>

...

<Routes>
  <Route path='signin' element={<SignIn />} />
  <Route path='signup' element={<SignUp />} />
  <Route path='recovery' element={<PasswordRecovery />} />
</Routes>

Upvotes: 12

Related Questions