路由頁面
<pre class="brush:php;toolbar:false;">從「react」匯入 React, { useContext }; 從“./context”導入{globalC}; 從「react-router-dom」匯入{路由、交換器、BrowserRouter}; 從“./About”導入關於; 從“./Dashboard”導入儀表板; 從“./Login”匯入登入名; 從“./PageNotFound”導入PageNotFound; 函數路線(){ const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); 返回 ( <瀏覽器路由器> <開關> {驗證登入? ( <> <路線路徑=“/儀表板”組件= {儀表板}精確/> /> <路線確切路徑=“/關於”元件= {關於} /> </> ) : ( <路由路徑=“/”元件={登入}精確/>> )} <路由元件={PageNotFound} /> </切換> </瀏覽器路由器> ); } 導出預設路由;</pre>上下文頁面
從「react」匯入 React, { Component, createContext }; 從“axios”導入 axios; 匯出 const globalC = createContext(); 導出類別 Gprov 擴充組件 { 狀態={ 授權登入:空, authLogin錯誤:空 }; 組件DidMount() { var localData = JSON.parse(localStorage.getItem("loginDetail")); 如果(本地資料){ this.setState({ authLogin:本地數據 }); } } 登入資料 = async() => { 讓有效負載= { 令牌:“ctz43XoULrgv_0p1pvq7tA”, 數據: { 名稱:“名字第一”, 電子郵件:“互聯網電子郵件”, 電話:“電話主頁”, _重複:300 } }; 等待 axios .post(`https://app.fakejson.com/q`,有效負載) .then((res) => { if (res.status === 200) { this.setState({ authLogin:res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((錯誤) => this.setState({ 授權登入錯誤:錯誤 }) ); }; 使成為() { // console.log(localStorage.getItem("loginDetail")); 返回 ({this.props.children} ); } }</前> <p><br />></p>
P粉2535186202023-08-25 09:42:47
import { Routes, Route, Navigate } from "react-router-dom"; function App() { return ( <Routes> <Route path="/public" element={<PublicPage />} /> <Route path="/protected" element={ <RequireAuth redirectTo="/login"> <ProtectedPage /> </RequireAuth> } /> </Routes> ); } function RequireAuth({ children, redirectTo }) { let isAuthenticated = getAuth(); return isAuthenticated ? children : <Navigate to={redirectTo} />; }
文件連結: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
P粉5059175902023-08-25 00:11:28
<BrowserRouter> <Switch> {authLogin ? ( <> <Route path="/dashboard" component={Dashboard} exact /> <Route exact path="/About" component={About} /> </> ) : ( <Route path="/" component={Login} exact /> )} <Route component={PageNotFound} /> </Switch> </BrowserRouter>
Switch
除了Route
和Redirect
元件之外,不會處理其他任何渲染。如果您想要像這樣“嵌套”,那麼您需要將每個元件包裝在通用路由中,但這是完全不必要的。
您的登入元件尚未處理重定向回原來存取的「首頁」或私人路由。
react-router-dom
v6在版本6中,自訂路由元件已經不再受歡迎,首選方法是使用auth佈局元件。
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoutes = () => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ? <Outlet /> : <Navigate to="/login" replace state={{ from: location }} />; }
...
<BrowserRouter> <Routes> <Route path="/" element={<PrivateRoutes />} > <Route path="dashboard" element={<Dashboard />} /> <Route path="about" element={<About />} /> </Route> <Route path="/login" element={<Login />} /> <Route path="*" element={<PageNotFound />} /> </Routes> </BrowserRouter>
或
const routes = [ { path: "/", element: <PrivateRoutes />, children: [ { path: "dashboard", element: <Dashboard />, }, { path: "about", element: <About /> }, ], }, { path: "/login", element: <Login />, }, { path: "*", element: <PageNotFound /> }, ];
...
export default function Login() { const location = useLocation(); const navigate = useNavigate(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; navigate(from, { replace: true }); } }, [authLogin, location, navigate]); return ( <div style={{ height: "100vh" }} className="d-flex justify-content-center align-items-center" > <button type="button" onClick={loginData} className="btn btn-primary"> 登录 </button> </div> ); }
react-router-dom
v5建立一個消費您的auth上下文的PrivateRoute
元件。
const PrivateRoute = (props) => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ? ( <Route {...props} /> ) : ( <Redirect to={{ pathname: "/login", state: { from: location } }} /> ); };
更新您的Login
元件以處理重定向回原來存取的路由。
export default function Login() { const location = useLocation(); const history = useHistory(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; history.replace(from); } }, [authLogin, history, location]); return ( <div style={{ height: "100vh" }} className="d-flex justify-content-center align-items-center" > <button type="button" onClick={loginData} className="btn btn-primary"> 登录 </button> </div> ); }
將所有路由渲染為「扁平清單」
function Routes() { return ( <BrowserRouter> <Switch> <PrivateRoute path="/dashboard" component={Dashboard} /> <PrivateRoute path="/About" component={About} /> <Route path="/login" component={Login} /> <Route component={PageNotFound} /> </Switch> </BrowserRouter> ); }