React 登陆鉴权路由设置
主文件:
<HashRouter >
<ErrorBoundry>
<Suspense fallback={Loading()}>
<Switch>
<Route exact path="/login" component={Login}/>
{/* 要经过登录验证的页面都要使用PrivateRoute包装 */}
<PrivateRoute exact path="/" component={Home1}/>
<PrivateRoute path="/user" component={User1}/>
<PrivateRoute path="/detail/:id" component={Detail}/>
<Route path="*" component={NotFound}/>
</Switch>
</Suspense>
</ErrorBoundry>
</HashRouter>
PrivateRoute:
const PrivateRoute = (props) => { const { user: { isLogin , isAdmin} , component: Cmp , ...rest } = this.props; const pathname = this.props.location.pathname; // 从哪儿来 const NCmp = HFhoc(Cmp); return isLogin ? // 如果是已经登录的状态 去其他界面 应该就是对应的界面 <Route {...rest} render = {props => { return <NCmp {...props}/> }} /> : <Redirect to={{ pathname:'/login', state: pathname }}/> }
Login:
const Login = () => { if (user.isLogin) { return <Redirect to={pathname} /> } return <div>Login</div> }

浙公网安备 33010602011771号