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并始终进行渲染。

您可以改用render组件的Route属性，以便第二个组件不匹配/protected路由以外的任何路由。

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

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

1 个答案: