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

Question

题目描述

react-router 嵌套路由元素，子元素的相关内容加载不出来，而且整个地址无法匹配

题目来源及自己的思路

想用外层路由实现模板页、登录、404等页面，
在模板页内层用子路由实现内容的动态加载

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//外层路由 App.js

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

//内层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>
        );
    }

你期待的结果是什么？实际看到的错误信息又是什么？

输入http://127.0.0.1:3000/temperature/month，结果匹配到外层NotFound.

Answer 1

因为使用Switch标签包裹，route只会被渲染一个，/temperature/month 这个路由在App.js并没有匹配，所以就渲染了<Route component={NotFound} />。为什么没有匹配 <Route exact component={Home} path="/" /> 这个？ 因为是精准匹配，所以导致/temperature/month 无法匹配到这个组件。如何解决？1.调整一下Route顺序，去掉精准匹配，让/temperature/month匹配到Home组件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Route&nbsp;component={Login}&nbsp;path="/login"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Route&nbsp;component={Home}&nbsp;path="/"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Route&nbsp;component={NotFound}&nbsp;/>