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