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

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>
  );
}

If i process 404 page in the above way, / handle it well, but <NotFound /> not be rendered if any path is entered after /page/fldlfsd;lf; or /search/dsklfskldf. Is there a way?

Answer 1

Paths like "/page/fldlfsd;lf;" and "/search/dsklfskldf" will be matched and rendered by the Routes component. The route param validation needs to occur in the routed component.

Each component can use the useParams hook to access the route param, validate it, and redirect to the NotFound route if param is invalid.

To help with this I suggest creating a discrete route to render NotFound so you can imperatively redirect to it from components and create a redirect route to handle unknown routes.

Example:

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>
  );
}

...

MovieMenu

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

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

...