React Router 4 嵌套路由未呈现

IT技术 reactjs react-router react-router-v4 react-router-dom
2021-03-27 05:30:41

我正在尝试在我的一个组件中进行嵌套路由。

这是父组件：

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在/路线上呈现良好，但/test呈现完全空白的页面。知道为什么会这样吗？

1个回答

发生此行为是因为exact在父路由上提到了一个属性

<Route exact path="/" component={Landing} />

所以发生的事情是 react-router 看到一个/test匹配的路径，然后尝试从顶层开始匹配它。它看到两条路线，一条是exactly /，另一条是/contribute。它们都不匹配所需的路径，因此您会看到一个空白页

你需要写

<Route path="/" component={Landing} />

因此，当您执行此操作时，它将查看/哪些/test部分匹配，然后将尝试在landing它将找到的组件中找到匹配的路由。

还要更改父路由的顺序，因为Switch呈现第一个匹配项并且/是部分匹配项，/test因此/contribute无法正常工作

你的最终代码看起来像

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <Switch>
        <Route path="/contribute" component={Contribute} />
        <Route path="/" component={Landing} />
      </Switch>
    </Provider>
  </BrowserRouter>
);
谢谢，我在迁移到路由器 4 几天后尝试设置它！
2021-05-26 05:30:41
啊哈！感谢您的明确答复，非常有帮助。
2021-05-30 05:30:41
其它你可能感兴趣的问题
上一篇使用 Chrome Devtools 调试 Babel 转译 React 时，“this”的值不正确 下一篇函数后的 Javascript 中的冒号是什么意思？