[英]React Router v6 Redirects
thank you for taking the time to review this question in advance.感谢您抽出宝贵时间提前查看此问题。 I have experience with v5 but since changed pretty significantly in v6 I'm quite confused on how to setup a redirect within a nested page.
我有使用 v5 的经验,但由于在 v6 中发生了相当大的变化,我对如何在嵌套页面中设置重定向感到非常困惑。
For example my page structure is as follows:例如我的页面结构如下:
- /auth
- /client
- dashboard
- settings
- profile
- password
In my /client
route i have a redirect set as follows (where APP_URL = /client
:在我的
/client
路由中,我有一个重定向设置如下(其中APP_URL = /client
:
<Route path="/*" element={<Navigate to={`${APP_URL}/dashboard`} />} />
However, within my /settings
route i would like to have it so that /settings
redirects to /settings/profile
.但是,在我的
/settings
路线中,我想拥有它,以便/settings
重定向到/settings/profile
。 When setting a redirect within a nested route that also has a redirect it appears to cause an endless loop or redirect to the redirect set within the parent.在也具有重定向的嵌套路由中设置重定向时,它似乎会导致无限循环或重定向到父级中设置的重定向。
App.tsx应用程序.tsx
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="*" element={<Views />}/>
</Routes>
</Router>
</div>
);
}
Views意见
export const Views = () => {
return (
<Routes>
<Route path="*" element={<Navigate to={APP_URL} />} />
<Route path={`${APP_URL}/*`} element={<AppLayout />} />
</Routes>
)
}
AppLayout应用布局
export const AppLayout = () => {
return (
<Content>
<AppViews />
</Content>
)
}
AppViews应用视图
export const AppViews = () => {
return (
<Routes>
<Route
path="/*"
element={<Navigate to={`${APP_URL}/dashboard`} />}
/>
<Route path={`/dashboard`} element={<Dashboard />} />
<Route path={`/settings/*`} element={<Settings />} />
</Routes>
)
}
Settings设置
const Settings = () => {
return (
<>
<Routes>
<Route
path="/*"
element={<Navigate to={`${APP_URL}/settings/profile`} />}
/>
<Route path={`/profile`} element={<Profile />} />
<Route path={`/password`} element={<Password />} />
</Routes>
</>
)
}
Does anyone have any experience with this?有人对这个有经验么?
I believe route with asterisk should be put at the bottom to be fallback for routes that are not listed, lemme know this doesnt fix your issue我相信带星号的路线应该放在底部,以作为未列出路线的后备,让我知道这不能解决您的问题
<Routes>
<Route path={`/profile`} element={<Profile />} />
<Route path={`/password`} element={<Password />} />
<Route
path="/*"
element={<Navigate to={`${APP_URL}/settings/profile`} />}
/>
</Routes>
You are mixing up absolute paths for relative paths.您正在混淆相对路径的绝对路径。 Since you are rendering
Setting
on a "/settings"
path all the nested routes need to also be rendered as subroutes.由于您在
"/settings"
路径上呈现Setting
,因此所有嵌套路由也需要呈现为子路由。 The这
const Settings = () => {
return (
<>
<Routes>
<Route path={`profile`} element={<Profile />} /> // "/settings/profile"
<Route path={`password`} element={<Password />} /> // "/settings/password"
<Route
path="*"
element={<Navigate to="../profile" />} // "/settings/profile"
/>
</Routes>
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.