React Router V6 - NotFound 组件不能使用动态参数/slug？

Question

我已经安装了"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;

Answer 1

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

您在这里的选项是：

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

Answer 2

1. 尝试删除完全因为已从 v6 中删除并确保 Page404 是正确的组件或创建Notfound.jsx

2. 检查帖子是否不存在，然后重定向到 Notfound 页面。