Question

我试图在我的某个组件中进行嵌套路由。

这里是父组件：

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呈现完全空白的页面。知道为什么会这样吗？

Answer 1

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

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

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

你需要写

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

因此，当您执行此操作时，会看到部分匹配/的{{1}}，然后会尝试在/test组件中找到匹配的路径。

同时更改父路线的顺序，因为landing呈现第一个匹配，而Switch是/的部分匹配，因此/test无法正常工作

您的最终代码看起来像

/contribute

React Router 4嵌套路由无法呈现

1 个答案: