encapsulate the router as a component to write a login status locally when the user logs in. If true returns a route normally, if it is false, jump to the login page. In order to prevent users from jumping directly to the inner page without logging in
< hr >requirement description is clear
step 1. Component encapsulation
const AuthRoute = (props) => {
const isLogin = sessionStorage.getItem("isLogin") === "true";
if(isLogin){
return <Route {...props} />
}else{
return <Redirect to={
{
pathname: "/login",
state: {
from: props.location,
}
}
} />
}
};step 2. Component call
<AuthRoute exact path="/" component={Home} />
<AuthRoute path="/System"component={System} /> question:
will report an error
Warning: You tried to redirect to the same route you"re currently on: "/ login"
if the router is BrowserRouter, how can I change this component to remove this warning without Switch?