如何正确使用 react-router-dom No match 404？

Question

我最近在使用 react-router-dom 时遇到了一个问题。 当我像这样使用我的代码时：

<BrowserRouter>
  <div>            
    <Switch>
        <Route path="/home" component={HOME} exact />
        <Route path="/protected" component={PROTECTED} />
        <Route component={NoMatch} />
    </Switch>
  </div>
</BrowserRouter>

NoMatch 路由组件工作正常，但是当我尝试使用一些像这样的 Auth 组件时，它不起作用：

<BrowserRouter>
  <div>            
    <Switch>
        <Route path="/home" component={HOME} exact />
      <Auth>
        <Route path="/protected" component={PROTECTED} />
      </Auth>
        <Route component={NoMatch} />
    </Switch>
  </div>
</BrowserRouter>

所以我阅读了一些文档和问题，并最终得出结论，我只需要使用 react-router-dom 组件。没有外部组件或自定义组件。所以我的问题是解决这个问题。或者我'必须考虑另一种身份验证路由方法。如果没有解决方法，有人可以建议在<BrowserRouter/>组件中进行这种身份验证的最佳方法吗？

Answer 1

React Router 只会在Switch渲染单个组件。 如果路径不匹配/home ，它将检查第二个组件，即Auth并始终呈现它。

您可以改为使用Route组件的render prop，以便第二个组件不会匹配除/protected路由之外的任何路由。

<BrowserRouter>
  <div>            
    <Switch>
        <Route path="/home" component={HOME} exact />
        <Route
          path="/protected"
          render={() => (
            <Auth><PROTECTED /></Auth>
          )}
        />
        <Route component={NoMatch} />
    </Switch>
  </div>
</BrowserRouter>