反应路由 - NotFound 组件在所有情况下都不会加载答案

【问题标题】：React routing - NotFound component does not load in all cases反应路由 - NotFound 组件在所有情况下都不会加载
【发布时间】：2021-02-13 04:15:41
【问题描述】：

我是 reactJS 的初学者。我在 App.js 中定义了以下路由

<Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route path='/dashboard' component={Dashboard} />
        <Route path="*" component={NotFound} ></Route>
      </Switch>
</Router>

NotFound 组件应针对任何无效路由显示。它适用于所有看起来像这样的无效路线

localhost:3000/something_invalid
localhost:3000/something_invalid_1

但是如果我在 URL 中再添加一个步骤。 NotFound 组件没有被渲染。例如，

localhost:3000/something_invalid/something_invalid
localhost:3000/something_invalid_1/something_invalid_1

我做错了什么？

【问题讨论】：

您是在导入Router 还是BrowserRouter as Router？
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
在这种情况下，您的代码完全有效并且应该可以工作。一定是其他原因导致了这种情况。您还定义了其他路线吗？
当您转到：/something_invalid/something_invalid 时究竟会发生什么？控制台中有任何内容？
您的代码与此有何不同：codesandbox.io/s/heuristic-tdd-xrmo3?file=/src/App.js 您可以尝试任何路径，未找到元素会毫无问题地呈现。

标签： javascript reactjs react-router

【解决方案1】：

<Router>
  <Switch>
    <Route exact path='/' component={Login} />
    <Route path='/dashboard' component={Dashboard} />
    <Route component={NotFound} ></Route>
  </Switch>
</Router>

代码已更新。

“Switch”渲染第一个匹配的子“Route”。没有路径的“路线”总是匹配的。

您示例中的星号在 React-Router 中使用，直到版本 3。

【讨论】：

【解决方案2】：

如果您使用根 URL，它将作为一个包罗万象的工作

请注意，这是有效的，因为它出现在您定义的其他路线之后，即。 /dashboard 仍然有效

<Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route path='/dashboard' component={Dashboard} />
        <Route path="/" component={NotFound} ></Route>
      </Switch>
</Router>

【讨论】：