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 頁面。