使用 Link 导航时，React Router 会忽略我的 PrivateRoute 包装器答案

【问题标题】：React Router ignores my PrivateRoute wrapper when navigating using a Link使用 Link 导航时，React Router 会忽略我的 PrivateRoute 包装器
【发布时间】：2020-09-14 13:11:29
【问题描述】：

我在使用 React Router 时遇到了一个奇怪的问题。我的PrivateRoute 包装器在使用Link 或NavLink 导航时不起作用。
基本上我有这样的东西：

<BrowserRouter>
  <Switch>
    <Route exact path="/"><Home /></Route>
    <PrivateRoute exact path="/private"><Private /></PrivateRoute>
  </Switch>
</BrowserRouter>

PrivateRoute 只是 Route 的一个包装器，用于检查身份验证。

现在，如果我在地址栏中输入 /private，PrivateRoute 会完成它的工作（并重定向到 /login，但这不会没关系）。但是，如果我在具有to="/private" 的Home 组件中使用NavLink，即使用户未经身份验证，React Router 也会路由到私有路由。

有什么方法可以合理解决这个问题吗？为什么 React Router 的行为是这样的，并且每次使用 NavLink 导航时都不会“遍历”BrowserRouter 中的所有路由？

【问题讨论】：

您的 PrivateRoute 代码是什么？尝试更改路线顺序，因为 Switch 呈现第一个匹配的路线
Here 是确切的 PrivateRoute 代码。路由顺序绝对不是问题，因为正如我所提到的，当我在地址栏中键入 URL 时它可以完美运行。

标签： reactjs react-router react-router-dom

【解决方案1】：

要解决您的问题，您需要在公共路由上添加exact 或exact="true"。如果不包含exact="true"，<Route path="/"> 指的是所有以/ 开头的子路由。所以/private 将匹配/ 路由，因此它将呈现<Home /> 组件。

这里是更新的代码

    <BrowserRouter>
      <Switch>
        <Route path="/" exact>
          <Home />
        </Route>
        <PrivateRoute path="/private">
          <Private />
        </PrivateRoute>
      </Switch>
    </BrowserRouter>

Here 是示例代码

【讨论】：

这不是问题。我只是忘记在问题中添加exact，对此感到抱歉。

【解决方案2】：

嗯，这实际上是一个非常简单而愚蠢的修复。
问题是PrivateRoute 组件在使用Links 更改路由时没有“重新安装”（这是 React Router 的有趣且巧妙的行为，我可以想象这会提高性能）。
同时，在地址栏中输入 URL 会刷新整个页面，从而“重新安装”所有组件。

由于检查身份验证的逻辑仅在 componentDidMount 中，如果组件没有“重新安装”，它就不会启动，因此产生了我的问题。

对于任何可能的未来访问者，要解决此问题，只需将您的身份验证检查逻辑从 componentDidMount 移到其他地方，并在 componentDidMount 和中引用它both componentDidUpdate。不要忘记检查 componentDidUpdate 中的 props 是否真的发生了变化——否则你会创建一个无限循环——就像这样：

componentDidUpdate(prevProps, prevState) {
  // You could also use shallowCompare, but that wasn't needed in my case
  if (this.props.requiredPerms !== prevProps.requiredPerms) {
    this.checkAuth(); // method with the logic which was in componentDidMount before
  }
}

【讨论】：