React Router V6 - NotFound 组件不能与动态参数/slug 一起使用？答案

【问题标题】：React Router V6 - NotFound component not working with dynamic parameter/slug?React Router V6 - NotFound 组件不能与动态参数/slug 一起使用？
【发布时间】：2021-03-08 22:44:23
【问题描述】：

我已经安装了"react-router-dom": "^6.0.0-beta.0" 并创建了一些页面路由。如果页面不存在，则面临 Page404 / NotFound 组件无法工作的问题。由于某种原因，当我使用动态页面/帖子 slug 时，如果没有具有此 ID 的页面/帖子，组件 NotFound 将无法工作。

React Router 中是否有解决此问题的选项？

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import AllPosts from "components/AllPosts";
import SinglePost from "components/SinglePost";
import NotFound from "components/Page404";

const App = () => (
  <Router>
    <Routes>
      <Route element={<AllPosts />} path="/" exact />
      <Route element={<SinglePost />} path="/:slug" />
      <Route element={<NotFound />} path="*" />
    </Routes>
  </Router>
);

export default App;

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

Routes 和 Route 组件不可能提前知道某些动态路径（例如“/someUnsupportedIdValue”）不是SinglePost 处理的有效路径。

您可以在这里选择：

有条件地在 SinglePost 中呈现一些替代 UI，类似于“找不到此 ID 的页面”。
检查是否存在具有匹配 ID 的页面，有条件地呈现该页面，或重定向（Navigate 组件在 v6 中替换了 Redirect）到您更通用的 404 页面（实际上，重定向到任何“丢弃”路径尚未明确处理的内容将使您进入您的 404 页面）。或者您可以使用navigate(to, { replace: true }) 强制重定向。

【讨论】：

【解决方案2】：

尝试删除 exact，因为已从 v6 中删除，并确保 Page404 是正确的组件或创建 Notfound.jsx
检查帖子是否不存在，然后重定向到 Notfound 页面。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。