React Router 4嵌套路由未呈现

大佬教程收集整理的这篇文章主要介绍了React Router 4嵌套路由未呈现，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Router 4嵌套路由未呈现？

发生此现象的原因是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>
);

解决方法

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>
);

大佬总结

以上是大佬教程为你收集整理的React Router 4嵌套路由未呈现全部内容，希望文章能够帮你解决React Router 4嵌套路由未呈现所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。