2

I'm trying to use nested routes for this code here in my Router.js:

return (
<Routes>
  <Route path="" element={<Home />} />
  <Route path="/DriverPage/*"  element={<DriverPage />}>
      <Route path="DriverSignUp" element={<DriverSignUp />}/>
      <Route path="DriverLogin" element={<DriverLogIn />} />
  </Route>
  <Route path="/PassengerPage/*" element={<PassengerPage />} />
</Routes>

And this is the code in the DriverPage.js component which is the parent route:

return (
<>     
  <div className="driver-auth">
    <button onClick={ ()=>navigate("DriverSignUp",{replace:true}) }> Sign up </button>
    <button onClick={ ()=>navigate("DriverLogin",{replace:true}) }> Sign in </button>
  </div>
  <Outlet />
</>

The problem is that I want to replace the parent component with the nested component when the buttons are clicked, because I don't want the parent to keep showing.

That's why I've tried to use navigate("DriverLogin",{replace:true}) but it's not helping and I see both the parent and the child route when clicking.

I think It's because of the /* I have in the parent route path, which means that it matches even if just the begining matches.

So, is there any solution for this with still using nested routes or should I not use the nesting?

And one more question is: Why isn't the replace working ?

Thanks!

Tehila
  • 917
  • 4
  • 19
  • can you provide all of the routes in your apps? Maybe you don't wrap route inside .. and also provide your app component structure – Anuj Panwar Jun 27 '22 at 03:14
  • I did wrap them inside , I edited the code above to show you. the thing is it that the routing works fine but the problem is that I see both the parent route and the child route when using nested routes... I didn't find any solution to this on Google either. – Tehila Jun 27 '22 at 03:29

2 Answers2

4

If you want to view this code example then checkout my sandbox

This is the default behavior of React Router dom

You can get that result in 2 ways

**1. you can define those routes individual **

    <Routes>
      <Route index element={<Home />} />
      <Route path="DriverPage" element={<DriverPage />}/>
      <Route path="DriverPage/DriverSignUp" element={<DriverSignUp />}/>
      <Route path="DriverPage/DriverLogin" element={<DriverLogIn />} />
    </Routes>

**2. Define the nested routes like this **

 <Routes>
  <Route index element={<Home />} />
  <Route path="DriverPage/*" element={<DriverPage />}/>
</Routes>

Parent component

function DriverPage(){
 <Routes>
   <Route index element={your parent code} /> 
   //your parent content only visible if path is /Driverpage.
   <Route path="DriverSignUp" element={<DriverSignUp/>}/> 
   <Route path="DriverSignIn" element={<DriverSignIn/>}/>
 </Routes>
}
export default <DriverPage/>;
Anuj Panwar
  • 358
  • 2
  • 8
  • 1
    Thanks! I think I will go with the first approach, because using nested routes for this is a bit complicated and makes the code more comlex. But one more question, what can be the reason why the **replace** in the navigate didn't work? – Tehila Jun 27 '22 at 05:40
  • If it is too complicated visit my code sandbox which link is given and play around with that code you can get an idea of how it works. – Anuj Panwar Jun 27 '22 at 05:44
  • Because your parent component still matches to route this is the default behavior of react-router there is nothing wrong with the navigate. – Anuj Panwar Jun 27 '22 at 07:48
  • Ah I understand now. Thank you so much for the help @Anuj Panwar! – Tehila Jun 27 '22 at 17:23
0

navigate("DriverLogin") will get the parent's path.

You should use navigate("/DriverLogin") if you don't want to get the parent's path

Hassan Naqvi
  • 933
  • 5
  • 18
dungnguyen317
  • 1
  • 1