使用 React Router 在 React 中创建 404 页面

我们已经学习了如何在 React Router 中创建动态 URL，并且我们还学习了如何在 React Router 中处理查询参数并将这些值传递给我们之前文章中的页面组件。

在本部分中，我们将学习如何在没有与 URL 匹配的路由时显示 404 页面。

你可以在这里找到最后一部分和带有 codesandbox 的最新代码库

运行应用程序并访问任何不存在的路线，例如/404-not-found

目前，您不会看到任何页面组件被渲染。让我们处理一下这个问题，如果没有匹配路径的路由，则显示一个默认页面。

在 React Router 中实现起来相当简单。在 React Router 组件内部，创建一个未定义路径的路由。并确保将代码放在所有路由的底部，这样路由器就会检查所有路由，如果未找到匹配项，则会回退。

// App.js

...

const NoMatchPage = () => {
  return (
    <h3>404 - Not found</h3>
  );
};

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Link to="/users">Users</Link>
        <Link to="/search?q=react">Search</Link>
        ...
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/search" component={SearchPage} />
        <Route component={NoMatchPage} />
      </Router>
    </section>
  );
};

...

访问任意 URL，你都会看到一个简单的 404 页面。等等，让我们检查一下其他页面是否正常运行。结果显示不会！

检查about链接，你会看到关于页面和 404 页面都被渲染了。这是因为路由器首先匹配了 path 的精确路由/about，然后它遍历到最底层并加载了 404 路由，因为这个路由没有定义 path。

React 路由器提供了一个名为Switchbreak 的组件，一旦路由得到解析，就不会加载其下方的任何其他路由组件。

实现起来相当简单。把所有路由封装到Switch组件里。我们来试试，确保 404 页面正常显示，不会报错。

// App.js

...
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
...

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Switch>
          <Route exact path="/" component={IndexPage} />
          ...
          <Route exact path="/search" component={SearchPage} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
    </section>
  );
};

...

该Switch组件会检查匹配的路由，如果某个路由已经匹配，则会中断对后续路由的检查。这样，我们就可以避免所有页面渲染 404 路由。

就是这样，希望你们学会了使用 React Router 为你的 React 应用创建 404 页面的技巧🤗

您可以在此处查看本系列的代码库，并在此处查看本节的代码

保持联系！

如果您喜欢这篇文章，您可以在Twitter上找到我，了解更新、公告和新闻。🐤

文章来源：https://dev.to/learnwithparam/creating-404-page-in-react-using-react-router-2em9