React Router Switch 路由不匹配

Question

使用 react 16.13.1 和 react-router 5.1.2 处理客户端路由，遇到一些路由问题。

首先，我有一个 Switch 组件和几个子 Route 组件（如下所示），并且一切都按预期进行。与我的任何特定路线都不匹配的路径会落入包罗万象的路线。

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/old-match">
    <Redirect to="/will-match" />
  </Route>
  <Route path="/will-match">
    <WillMatch />
  </Route>
  <Route path="*">
    <NoMatch />
  </Route>
</Switch>

接下来我想将一些路由设置为 private 这样只有登录的用户才能访问它们。我见过几个自定义 PrivateRoute 组件的例子，但是当我实现它们时，我似乎每次都遇到同样的问题......在私有路由之后定义的任何路由都不会成功匹配。我整理了一个简化版本的代码，它使用 isAuthenticated 内联变量来呈现一些条件组件，如下所示：

const isAuthenticated = true;

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  {isAuthenticated && (
    <>
      <Route path="/old-match">
        <Redirect to="/will-match" />
      </Route>
      <Route path="/will-match">
        <WillMatch />
      </Route>
    </>
  )}
  <Route path="*">
    <NoMatch />
  </Route>
</Switch>

包罗万象的路由永远不会匹配，因为它在私有片段之后。我在这里做错了什么？我在 https://codesandbox.io/s/react-router-test-fzl22 有这个简化示例的沙箱。感谢任何帮助。

Answer 1

React 片段标签破坏了 Switch 语句。如果您将代码重构为：

<Switch>
    <Route exact path="/">
        <Home />
    </Route>
    {isAuthenticated && (
        <Route path="/old-match">
            <Redirect to="/will-match" />
        </Route>
    )}
    {isAuthenticated && (
        <Route path="/will-match">
            <WillMatch />
        </Route>
    )}
    <Route path="*">
        <NoMatch />
    </Route>
</Switch>

代码运行良好。

您可以在您的沙箱的一个分支中看到这个工作 here。

Answer 2

尝试使用三元运算符而不是 And 运算

const isAuthenticated = true;

<Switch>
<Route exact path="/">
<Home />
</Route>
{isAuthenticated ? (
<>
  <Route path="/old-match">
    <Redirect to="/will-match" />
  </Route>
  <Route path="/will-match">
    <WillMatch />
  </Route>
</>
:
<Route path="*">
<NoMatch />
</Route>
)

React Router Switch 路由不匹配

React Router Switch routes not being matched

javascript

reactjs

react-router

switch-statement

url-routing