如何为每条未指定的路由显示 404 错误？答案

【问题标题】：How do I display a 404 error to every route that isn't specified?如何为每条未指定的路由显示 404 错误？
【发布时间】：2018-02-11 01:32:15
【问题描述】：

所以我有一个 React 应用程序，上面有一些使用 react-router 的路由。在弄乱不同的路线时，我不小心错过了输入路线。

我的问题是，即使我错过了输入路线，我的应用程序仍然可以正常呈现应用程序；没有抛出 404 错误。我的 App.js 文件是这样定义的：

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <MenuBar />                       //SIMPLIFIED FOR POST
            <SearchBar path="/search" exact/>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

我假设因为我的 MenuBar 组件被渲染到每条路线，因为没有指定的路线，这就是没有 404 错误的原因

我的其他组件确实指定了确切的路线，它们应该是唯一允许输入的路线，否则我想将 404 组件呈现到屏幕上

问题：如何向未指定的每条路线显示 404 错误？我想不出一个解决方案，因为 MenuBar 必须在每条路线上。假设有人告诉我应该只将菜单栏呈现到指定的路线，但我仍然如何找出或知道何时输入了无效路线？我猜我需要某种中间件来检查？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您可以通过将您的路由包装在 Switch 组件中来做到这一点，然后您只需添加以下内容：

 <Route component={Component} />

注意这条路线没有“路径”属性。现在，当发生“不匹配”时，此路由将呈现。

您可以在official react-router docs 中看到一个工作示例

【讨论】：

这看起来可行。交换机是否内置在反应路由器中？
是的，部分 api，只需像对所有组件一样导入它：import { Switch }
其实还有一个问题。由于我的 MenuBar 没有指定的路径.. 这不会有问题吗？除非我想办法只将菜单栏呈现给所有指定的路径
或者我可以简单地将 MenuBar 组件保留在 switch 组件之外？
是的，我很累，你可以像之前说的那样简单地将MenuBar放在外面，在说其他废话之前先睡觉。跟上！