亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React router v5:需要動態路由中的嵌套路由

React router v5:需要動態路由中的嵌套路由

蕪湖不蕪 2023-08-10 15:22:15
特別是react-router-dom v5.2.0?我有一個項目列表,所有這些項目都需要自己的頁面,并且在該動態路由中,我想要一些嵌套路由??梢赃@樣想:myapp.com/:item(主項目頁面)myapp.com/:item/about(關于項目頁面)myapp.com/:item/faq(常見問題解答項目頁面)問題是,按照我實現它的方式,每個嵌套/:item/whatever頁面都會收到 404。這是我的路由當前的樣子: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,但如果我嘗試轉到它們的嵌套路由,則會收到 404。我的設置有問題嗎?我怎樣才能讓它發揮作用?請注意,我已經嘗試了許多不同的變體:App組件中的嵌套路由有和沒有Switch包裝紙將組件Route作為component嵌套組件的 prop傳遞給編輯:決定包含我的Item組件的一個版本,其中我有我能想到的路線的所有變體/about。
查看完整描述

1 回答

?
寶慕林4294392

TA貢獻2021條經驗 獲得超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>

    )

}


我仍然很困惑,因為文檔顯示的內容有所不同,但無論如何,這就是解決問題的方法。


查看完整回答
反對 回復 2023-08-10
  • 1 回答
  • 0 關注
  • 253 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號