我面臨一個我無法理解的問題。我正在開發一個 React 代碼庫，我們開始有太多的路由，所以我決定稍微重構一下。有一些邏輯可以確定我們是否應該重定向到將檢查您是否已通過身份驗證的路由，如果沒有，則將您重定向到登錄頁面。我們也有沒有那種機制的基本路由，只顯示一個組件（對于每個不需要身份驗證的頁面，比如登錄、忘記密碼等）
我決定在一個不同的組件中抽象出這個邏輯，這將最終渲染一個路由。
這是路線的代碼：
<Switch>
{Object.values(userRoutes).map((route: SanitizedRoute) => (
<RouteController route={route} key={route.PATH} />
))}
</Switch>
路由器控制器.tsx
return (
<Route
path={route.PATH}
exact={route.EXACT}
render={() => {
return <Layout>{route.COMPONENT}</Layout>;
}}
/>
);
Route 組件的所有資訊都作為 prop 向下傳遞。如果我嘗試訪問/path_b呈現的是我的userRoute陣列的第一條路線。訪問任何路徑實際上都會回傳第一條路由，就好像它是map回圈輸出的唯一一條一樣。
如果我RouteController用它的內容替換組件：
<Switch>
{Object.values(userRoutes).map((route: SanitizedRoute) => (
<Route
path={route.PATH}
exact={route.EXACT}
key={route.PATH}
render={() => {
return <Layout>{route.COMPONENT}</Layout>;
}}
/>
))}
</Switch>
然后一切都會按預期正常作業。RouteController用一個組件包裝我Switch也可以正常作業 - 盡管我不確定每條路線都有一個 Switch 的副作用嗎？
{Object.values(userRoutes).map((route: SanitizedRoute) => (
<Switch key={route.PATH}>
<RouteController route={route} />
</Switch>
))}
我的問題是：
- 為什么不能將所有這些路由包裝在一個中？
- 是否有來自組件的一些道具我應該通過 my 手動傳遞給組件？
- 我知道用于渲染與路徑匹配的第一條路線。首先使用a的目的是否有多種失敗？
uj5u.com熱心網友回復：
為什么不能將所有這些路由包裝在一個中
<Switch>？
這是因為Switch組件的作業方式，它呈現第一個孩子<Route>或<Redirect>與位置匹配。
轉變
組件兩者RouteController都不是，因此它不參與匹配，實際上只會渲染第一個組件。這就是為什么無論路徑如何，您都只會看到渲染的第一條路線。
是否有來自組件的一些道具我應該通過 my
<Switch>手動傳遞給組件？<Route><RouterController>
可以在可能用于路徑匹配的路徑上移動/定義path道具（和任何其他“路線”道具），但這是不明智的，并且不是和組件的記錄用例。RouteControllerSwitchSwitchRoute
我知道
<Switch>用于渲染與路徑匹配的第一條路線。首先使用 a 的目的是否有多種<Switch>失敗？<Switch>
是的，如果您要渲染多個Switch組件，每個組件只有一個Route組件，那么此時它們并沒有真正切換路由，您依賴于任何包裝路由器的包容性路由匹配，或者在任何其他情況下完全匹配包裝開關。
解決方案
與其嘗試將路由映射到您的RouterController組件中并處理直接組成什么的問題，不如讓您將所有RouterController路由作為道具使用，并將它們渲染到單個組件中。Switch
路由器控制器.tsx
const RouterController = ({ routes }) => {
// any component business logic
return (
<Switch>
{routes.map((route: SanitizedRoute) => (
<Route
path={route.PATH}
exact={route.EXACT}
key={route.PATH}
render={() => <Layout>{route.COMPONENT}</Layout>}
/>
))}
</Switch>
);
};
...
<RouterController routes={Object.values(userRoutes)} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414881.html
標籤：
上一篇：React路由器V6與V5-login?redirect=my_other_page
下一篇：反應路由器domv6Auth