在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ react router 嵌套路由 內(nèi)層route找不到

react router 嵌套路由 內(nèi)層route找不到

題目描述

react-router 嵌套路由元素，子元素的相關(guān)內(nèi)容加載不出來，而且整個地址無法匹配

題目來源及自己的思路

想用外層路由實(shí)現(xiàn)模板頁、登錄、404等頁面，
在模板頁內(nèi)層用子路由實(shí)現(xiàn)內(nèi)容的動態(tài)加載

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
//外層路由 App.js

render() {
    return (
        <Switch>
            <Route exact component={Home} path="/" />
            <Route component={Login} path="/login" />
            <Route component={NotFound} />
        </Switch>
    )
  }

//內(nèi)層Home.js

render() {
        return (
            <Layout>
                <Header>Some Info.</Header>
                <Content>
                    <Switch>
                        <Route exact path="/" component={MyLayout} />
                        <Route path="/temperature/month" component={TemperatureMonth} />
                        <Route path="/temperature/day" component={TemperatureDay} />
                    </Switch>
                </Content>
            </Layout>
        );
    }

你期待的結(jié)果是什么？實(shí)際看到的錯誤信息又是什么？

輸入http://127.0.0.1:3000/temperature/month，結(jié)果匹配到外層NotFound.

回答
編輯回答
幼梔
  1. 因?yàn)槭褂肧witch標(biāo)簽包裹，route只會被渲染一個，/temperature/month 這個路由在App.js并沒有匹配，所以就渲染了<Route component={NotFound} />。
  2. 為什么沒有匹配 <Route exact component={Home} path="/" /> 這個？ 因?yàn)槭蔷珳?zhǔn)匹配，所以導(dǎo)致/temperature/month 無法匹配到這個組件。

如何解決？
1.調(diào)整一下Route順序，去掉精準(zhǔn)匹配，讓/temperature/month匹配到Home組件

          <Route component={Login} path="/login" />
          <Route component={Home} path="/" />
          <Route component={NotFound} />
2017年6月18日 13:25