Question

我正在使用React Router 4，而不是通过嵌套的Switch组件进行路由。这是我的路线：

const routes = (
  <div>
    <Switch>
      <Route exact path="/" >
        <Switch>
          <Route path="/test" component={Test} />
          <Route path="/other" component={Other} />
          <Route path="/about" component={About} />
        </Switch>
      </Route>
      <Route path="*" component={NotFound} />
    </Switch>
  </div>
);

我点击了根/路由，但是如果我尝试路由到任何其他嵌套路由/about，/other，/test，我会转到我的错误页。我认为这是因为exact Route上有/路径，但我不确定。我该如何解决这个问题？

Answer 1

正如文件所说，

Switch渲染第一个孩子或匹配的孩子位置。

在您的情况下，外部开关必须在2之间进行选择，确切路径=＆＃34; /＆＃34;和* ...所以它总是与NotFound匹配，除非路径正是＆＃34; /＆＃34; 这就是为什么你应该从第4行中移除确切内容并在内部开关内移动<Route path="*" component={NotFound} />。

对于你的情况，我写了类似的东西：

const routes = (
    <Switch>
      <Route exact={true} path="/" component={Index} />
      <Route exact={true} path="/test" component={Test} />
      <Route exact={true}  path="/other" component={Other} />
      <Route exact={true} path="/about" component={About} />
      <Route path="*" component={NotFound} />
    </Switch>
);

您可以从我的工作示例中检查这些文件： https://github.com/sstawecki/polakete/blob/master/client/src/index.js https://github.com/sstawecki/polakete/blob/master/client/src/Routes.js

为什么我没有通过Switch路由？反应路由器v4

1 个答案: