如何使用 React-Router 在 React 中正确渲染 404 页面？

Question

我正在使用 React 构建一个网站并使用 React-Router，当用户访问不存在的 url 时，我想呈现一个 404 页面。

一些网址是动态的，例如，

www.site.com/user/(username)

如果具有特定用户名的用户不存在，如何使用 react-router 呈现 404 页面？我是否必须在 API 调用期间在组件本身中手动编写代码以检查用户是否存在，然后将用户重定向到 404 组件？

我正在寻找将用户重定向到未找到页面的最佳方式。寻找有关如何做到最好的想法。

Answer 1

你可以检查一下是否this.props.match.username存在。如果存在则正常渲染，如果不存在则使用React-Router Redirect Component 重定向到404组件。如果您有多个路径需要此功能，那么您可以考虑为此目的制作HOC 。