React router v6 - 从父路由导航到嵌套路由而不显示父路由

Question

我正在尝试在我的以下代码中使用嵌套路由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>

DriverPage.js这是父路由组件中的代码：

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 />
</>

问题是我想在单击按钮时用嵌套组件替换父组件，因为我不希望父组件继续显示。

这就是为什么我尝试使用navigate("DriverLogin",{replace:true})但它没有帮助，并且单击时我会看到父路线和子路线。

我认为这是因为/*我在父路由路径中拥有，这意味着即使只是开始匹配它也匹配。

那么，是否有任何解决方案仍然使用嵌套路由，或者我不应该使用嵌套？

还有一个问题是：为什么替换不起作用？

谢谢！

Answer 1

如果您想查看此代码示例，请查看我的沙箱

这是 React Router dom 的默认行为

您可以通过两种方式获得结果

**1. 您可以单独定义这些路线**

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

**2. 像这样定义嵌套路由**

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

父组件

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/>;