蕪湖不蕪
2023-08-10 15:22:15
特別是react-router-dom v5.2.0?我有一個項目列表,所有這些項目都需要自己的頁面,并且在該動態(tài)路由中,我想要一些嵌套路由。可以這樣想:myapp.com/:item(主項目頁面)myapp.com/:item/about(關(guān)于項目頁面)myapp.com/:item/faq(常見問題解答項目頁面)問題是,按照我實現(xiàn)它的方式,每個嵌套/:item/whatever頁面都會收到 404。這是我的路由當(dāng)前的樣子:const App = ({}) => {? ? return (? ? ? ? <Router>? ? ? ? ? ? <Switch>? ? ? ? ? ? ? ? <Route exact path='/:id' component={Item}>? ? ? ? ? ? ? ? </Route>? ? ? ? ? ? </Switch>? ? ? ? </Router>? ? )}const Item = ({ match }) => {? ? return (? ? ? ? <div>? ? ? ? ? ? TODO: Item {match.url}? ? ? ? ? ? <Switch>? ? ? ? ? ? ? ? <Route path={`${match.path}/about`}>? ? ? ? ? ? ? ? ? ? <h1>TODO: About</h1>? ? ? ? ? ? ? ? </Route>? ? ? ? ? ? ? ? <Route path={`${match.path}/faq`}>? ? ? ? ? ? ? ? ? ? <h1>TODO: FAQ</h1>? ? ? ? ? ? ? ? </Route>? ? ? ? ? ? </Switch>? ? ? ? </div>? ? );};就目前情況而言,我可以獲得 的頁面/:item,但如果我嘗試轉(zhuǎn)到它們的嵌套路由,則會收到 404。我的設(shè)置有問題嗎?我怎樣才能讓它發(fā)揮作用?請注意,我已經(jīng)嘗試了許多不同的變體:App組件中的嵌套路由有和沒有Switch包裝紙將組件Route作為component嵌套組件的 prop傳遞給編輯:決定包含我的Item組件的一個版本,其中我有我能想到的路線的所有變體/about。
1 回答

寶慕林4294392
TA貢獻(xiàn)2021條經(jīng)驗 獲得超8個贊
所以看來我的處理方式完全錯誤。
對于我想做的事情,我的嵌套路由需要位于組件上App,或者至少位于第一個Switch包裝器的根上。
所以基本上這就是解決方案:
const App = ({}) => {
return (
<Router>
<Switch>
<Route exact path='/:id' component={Item}/>
<Route exact path='/:id/about' component={() => <div>TODO: About</div>}/>
<Route exact path='/:id/faq' component={() => <div>TODO: FAQ</div>}/>
</Switch>
</Router>
)
}
我仍然很困惑,因為文檔顯示的內(nèi)容有所不同,但無論如何,這就是解決問題的方法。
添加回答
舉報
0/150
提交
取消