[英]React Router 4 Nested Routes not rendering
我正在尝试在我的组件之一中进行嵌套路由。
这是父组件:
const App = () => (
<BrowserRouter>
<Provider store={store}>
<Switch>
<Route exact path="/" component={Landing} />
<Route path="/contribute" component={Contribute} />
</Switch>
</Provider>
</BrowserRouter>
);
这是子组件:
const Landing = () => (
<div>
<SearchBar />
<section className="results-sctn">
<Route exact path="/" component={ArtistList} />
<Route path="/test" component={Test} />
</section>
</div>
);
ArtistList
可以在/
路由上ArtistList
呈现,但是/test
呈现一个完全空白的页面。 知道为什么会这样吗?
发生这种现象的原因是在父路由上提到了exact
属性
<Route exact path="/" component={Landing} />
因此,发生的情况是react-router看到了要匹配的路径/test
,然后尝试从顶层开始进行匹配。 它看到两条路线,一条是exactly /
,另一条是/contribute
。 它们都不符合所需的路径,因此您会看到空白页
你需要写
<Route path="/" component={Landing} />
因此,执行此操作时,它将看到/
部分匹配/test
,然后尝试在将要找到的landing
组件中找到匹配的路线。
还要更改父Route的顺序,因为Switch
会呈现第一个匹配项,并且/
是/test
的部分匹配项,因此/contribute
无法正常工作
您的最终代码如下所示
const App = () => (
<BrowserRouter>
<Provider store={store}>
<Switch>
<Route path="/contribute" component={Contribute} />
<Route path="/" component={Landing} />
</Switch>
</Provider>
</BrowserRouter>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.