react router 嵌套路由 内层route找不到

Question

题目描述react-router 嵌套路由元素，子元素的相关内容加载不出来，而且整个地址无法匹配题目来源及自己的思路想用外层路由实现模板页、登录、404等页面，在模板页内层用子路由实现内容的动态加载相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）//外层路由 App.jsrender() {     return (        <Switch>             <Route exact component={Home} path="/" />             <Route component={Login} path="/login" />             <Route component={NotFound} />         </Switch>     )   }//内层Home.jsrender() {         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>         );     }你期待的结果是什么？实际看到的错误信息又是什么？输入http://127.0.0.1:3000/temperature/month，结果匹配到外层NotFound.

Answer 1

1. 因为使用Switch标签包裹，route只会被渲染一个，/temperature/month 这个路由在App.js并没有匹配，所以就渲染了<Route component={NotFound} />。

2. 为什么没有匹配 <Route exact component={Home} path="/" /> 这个？ 因为是精准匹配，所以导致/temperature/month 无法匹配到这个组件。

如何解决？
1.调整一下Route顺序，去掉精准匹配，让/temperature/month匹配到Home组件

          <Route component={Login} path="/login" />
          <Route component={Home} path="/" />
          <Route component={NotFound} />