React router v6 — переход от родительского маршрута к вложенному маршруту без отображения родительского маршрута

Я пытаюсь использовать вложенные маршруты для этого кода здесь, в моем 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}), но это не помогает, и при нажатии я вижу как родительский, так и дочерний маршрут.

Я думаю, это из-за того, что у меня есть /* в пути родительского маршрута, что означает, что он совпадает, даже если совпадает только начало.

Итак, есть ли какое-либо решение для этого с использованием вложенных маршрутов или мне не следует использовать вложенность?

И еще один вопрос: Почему замена не работает?

Спасибо!

🤔 А знаете ли вы, что...
React поддерживает серверный рендеринг (SSR) для улучшения SEO и производительности.


317
1

Ответ:

Решено

Если вы хотите просмотреть этот пример кода, проверьте мою песочницу

This is the default behavior of 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/>;