Cara menggunakanreact-router-domBuat laluan yang dilindungi dan simpan respons dalam localStorage supaya pengguna boleh melihat butirannya semula apabila mereka membukanya lagi. Selepas log masuk, anda harus dialihkan ke halaman papan pemuka.
Semua fungsi ditambah dalam ContextApi.
Pautan kotak kod: Kod
Saya dah cuba tapi tak berjaya.
Halaman penghalaan
import React, { useContext } from "react"; import { globalC } from "./context"; import { Route, Switch, BrowserRouter } from "react-router-dom"; import About from "./About"; import Dashboard from "./Dashboard"; import Login from "./Login"; import PageNotFound from "./PageNotFound"; function Routes() { const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); return ( {authLogin ? ( <> ); } export default Routes;
Halaman konteks
import React, { Component, createContext } from "react"; import axios from "axios"; export const globalC = createContext(); export class Gprov extends Component { state = { authLogin: null, authLoginerror: null }; componentDidMount() { var localData = JSON.parse(localStorage.getItem("loginDetail")); if (localData) { this.setState({ authLogin: localData }); } } loginData = async () => { let payload = { token: "ctz43XoULrgv_0p1pvq7tA", data: { name: "nameFirst", email: "internetEmail", phone: "phoneHome", _repeat: 300 } }; await axios .post(`https://app.fakejson.com/q`, payload) .then((res) => { if (res.status === 200) { this.setState({ authLogin: res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((err) => this.setState({ authLoginerror: err }) ); }; render() { // console.log(localStorage.getItem("loginDetail")); return ( {this.props.children} ); } }
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk v6:
import { Routes, Route, Navigate } from "react-router-dom"; function App() { return ( ); } function RequireAuth({ children, redirectTo }) { let isAuthenticated = getAuth(); return isAuthenticated ? children : Pautan ke dokumentasi:https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
Soalan
Switch不处理除Route和RedirectSebarang rendering di luar komponen. Jika anda ingin "bersarang" seperti ini, maka anda perlu membungkus setiap komponen dalam laluan yang sama, tetapi ini sama sekali tidak perlu.Komponen log masuk anda juga tidak mengendalikan ubah hala kembali ke "rumah" asal atau laluan peribadi yang dilawati.
Penyelesaian
react-router-domv6Dalam versi 6, komponen penghalaan tersuai tidak lagi popular, kaedah yang disyorkan ialah menggunakan komponen susun atur pengesahan.
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoutes = () => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // or loading indicator/spinner/etc } return authLogin ?...
atau
const routes = [ { path: "/", element:...
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 ( ); }react-router-domv5Buat komponen
PrivateRouteyang menggunakan konteks pengesahan anda.const PrivateRoute = (props) => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // or loading indicator/spinner/etc } return authLogin ? (Kemas kini komponen
Loginanda untuk mengendalikan ubah hala laluan kembali ke lawatan asal.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 ( ); }Render semua laluan dalam "senarai rata"
function Routes() { return ( ); }