Rod*_*lva 190
我认为您应该使用不匹配路由方法。
在文档中检查这一点。
reactrouter./docs/en/v6/getting-started/tutorial#adding-a-no-match-route
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lab" element={<Lab />} />
<Route
path="*"
element={<Navigate to="/" replace />}
/>
</Routes>
</BrowserRouter>
更新 - 2022 年 3 月 18 日
为了保持历史干净,你应该设置replace
prop. 这将避免用户单击返回后的额外重定向。感谢@Paul 这个提示。
小智 32
我找到了另一种方法来做到这一点:
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
useEffect(() => {
if (LoggedIn){
return navigate("/");
}
},[LoggedIn]);
reactrouter./docs/en/v6/getting-started/overview#navigation
小智 7
创建文件 RequireAuth.tsx
import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";
export function RequireAuth({ children }: { children: JSX.Element }) {
let { user } = useAuth();
let location = useLocation();
if (!user) {
return <Navigate to="/" state={{ from: location }} replace />;
} else {
return children;
}
}
导入需要用户私有路由器的组件:
import { Routes as Switch, Route } from "react-router-dom";
import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";
export function Routes() {
return (
<Switch>
<Route path="/" element={<SignIn />} />
<Route
path="/dashboard"
element={
<RequireAuth>
<Dashboard />
</RequireAuth>
}
/>
</Switch>
);
}
Ayu*_*nda 5
在反应的 V5 中,即。react-router-dom 我们有 Redirect 组件。但是在 React V6 中,它被更新为导航组件。
我们可以在此组件中传递替换,以避免在单击后退和前进选项时发生不必要的重定向。
下面附上使用演示:
<Route path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
<Route path = "/register" element={user ? <Navigate to="/" replace /> : <Register />} />
更多推荐
重定向,如何在,Router,React
发布评论