路由守卫

//user
import React from "react";
import { Route, Redirect } from "react-router-dom";
import LoginPage from "../pages/LoginPage";
export default function PrivateRoute({ component: Cmp, isLogin, ...rest }) {
 return (
 <Route
 {...rest}
 render={props =>
 isLogin ? (
 <Cmp {...props} />
 ) : (
 <Redirect
 to={{
 pathname: "/login",
 state: { redirect: props.location.pathname },
 }}
 />
 )
 }
 />
 );
}

//login
import React from "react";
import { Redirect } from "react-router-dom";
export default function LoginPage({ location, isLogin, login }) {
 const redirect = location.state.redirect || "/"; //重定向地址
 if (isLogin) {
 return <Redirect to={redirect} />;
 }
 return (
 <div>
 <p>⽤户登录</p>
 <br />
 <button onClick={login}>登录</button>
 </div>
 );
}

//罗友
<Route exact path="/login" component={LoginPage} />
<PrivateRoute path="/user" component={UserPage} />
<PrivateRoute path="/user" component={UserPage} isLogin={true} />