topic description
react-router nesting routing elements, the relevant contents of the child elements cannot be loaded, and the whole address cannot match
sources of topics and their own ideas
want to use outer route to implement template page, login, 404 and other pages.
use sub-route to dynamically load content in the inner layer of template page
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / outer routing App.js
render() {
return (
<Switch>
<Route exact component={Home} path="/" />
<Route component={Login} path="/login" />
<Route component={NotFound} />
</Switch>
)
}/ / Inner 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>
);
}what result do you expect? What is the error message actually seen?
enter http://127.0.0.1:3000/temperature/month, and the result matches to the outer NotFound.