Reactjs React路由器在使用链接导航时忽略我的PrivateRoute包装器

我对路由器有一个奇怪的问题。使用

链接

或

导航链接

导航时，我的

PrivateRoute

包装器不起作用
基本上我有这样的东西：

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

PrivateRoute

只是

Route

的包装，用于检查身份验证

现在，如果我在地址栏中键入/private，

PrivateRoute

执行它的工作（并重定向到/login，但这并不重要）。 但是，如果我在

Home

组件中使用

NavLink

，该组件具有

to=“/private”

，则即使用户未经身份验证，也会将路由器路由响应到专用路由

---

我有没有办法合理地解决这个问题？为什么React路由器的行为是这样的，而不是每次使用

NavLink

导航时都“通过”浏览器路由器中的所有路由？

要解决您的问题，您需要在公共路由上添加

exact

或

exact=“true”

。 如果未包含

exact=“true”

，

将引用以

/

开头的所有子路线。 所以

/private

将匹配

/

路由，因此它将呈现

组件

这里是更新的代码

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

---

是示例代码吗？实际上，这是一个非常简单且愚蠢的修复。
问题是

PrivateRoute

组件在使用

Link

s更改路由时没有“重新装载”（这是React路由器有趣且聪明的行为，我可以想象这会提高性能）。
同时，在地址栏中键入URL将刷新整个页面，从而“重新安装”所有组件

由于检查auth的逻辑仅在

componentDidMount

中，因此如果组件没有“重新装载”，它就不会启动，因此产生了我的问题

对于任何可能的未来访问者，要解决此问题，只需将身份验证逻辑从

componentDidMount

移到其他地方，并在

componentDidMount

和

componentdiddupdate

中引用它。别忘了检查在

componentdiddupdate

中道具是否确实发生了更改-否则您将创建一个无限循环-如下所示：

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
  }
}

---

你的私人路线代码是什么？尝试更改路由顺序原因开关会将第一个匹配路由的确切PrivateRoute代码呈现出来。路由顺序绝对不是问题，因为正如我提到的，当我在地址栏中键入URL时，它可以完美地工作。这不是问题所在。我只是忘了在问题中添加

exact

，对此表示抱歉。