如何在 react-route-dom v6 中处理 Route 404 页面，例如“/search/:searchText”

Question

function App() {
  return (
    <RecoilRoot>
      <Router>
        <Navbar />
        <Routes>
          <Route path={"/"} element={<Home />} />
          <Route path={`/page/:menu`} element={<MovieMenu />} />
          <Route path={`/movie/:id`} element={<Detail />} />
          <Route path={`/search/:searchText`} element={<Search />} />
          <Route path={"*"} element={<NotFound />} />
        </Routes>
      </Router>
    </RecoilRoot>
  );
}

如果我按上述方式处理404页面，/处理的很好，但是<NotFound />如果在/page/fldlfsd;lf;或/search/dsklfskldf之后输入任何路径，则不会呈现<NotFound /> .有办法吗？

Answer 1

"/page/fldlfsd;lf;" 和 "/search/dsklfskldf" 等路径将由 Routes 组件匹配和呈现。路由参数验证需要在路由组件中进行。

每个组件都可以使用 useParams 钩子访问路由参数，验证它，如果参数无效则重定向到 NotFound 路由。

为了解决这个问题，我建议创建一个离散路由来呈现 NotFound，这样您就可以从组件强制重定向到它并创建一个重定向路由来处理未知路由。

示例：

function App() {
  return (
    <RecoilRoot>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/page/:menu" element={<MovieMenu />} />
          <Route path="/movie/:id" element={<Detail />} />
          <Route path="/search/:searchText" element={<Search />} />
          <Route path="/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </Router>
    </RecoilRoot>
  );
}

...

电影菜单

const navigate = useNavigate();
const { menu } = useParams();

useEffect(() => {
  ... logic to validate menu param ...
  if (invalidMenu) {
    navigate("/404", { replace: true });
  }
}, [menu, navigate]);

...

如何在 react-route-dom v6 中处理 Route 404 页面，例如“/search/:searchText”

how to process Route 404page such as "/search/:searchText" in react-route-dom v6

reactjs

react-router-dom