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页面，/处理好，但是如果在or<NotFound />之后输入任何路径就不会被渲染。有办法吗？/page/fldlfsd;lf;/search/dsklfskldf
"/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]);
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句