在学习路由导航守卫之前，我们需要先学习一下，react中的插槽

react的插槽

function DetailTitle(props){
    return <div>{props.children[0]}新闻标题</div> //我是新闻标题
}

function Detail(props){
    return (
                <div>
                    <DetailTitle>
                        <span>我是</span>
                        <span>欢迎！</span>
                    </DetailTitle>
            		<p>新闻内容</p>
                </div>
            )
}

路由导航守卫

function CheckLogin(props) {
  const isLogin = localStorage.getItem("token") ? true : false;
  return (
    <Route
      render={() => {
        return isLogin ? props.children : <Redirect to="/login" />;
      }}
    ></Route>
  );
}

Route组件需要点击才能触发，render函数可以模拟点击效果

使用

<NavLink to='/center'>个人中心</NavLink>

<CheckLogin path='/center'>
	<Center />  {/* 注意:此时的Center是通过render函数渲染出来的，不是一个路由组件了。props不会含有路由相关的信息 */}
</CheckLogin>

如果那个组件，需要这个导航守卫，就用CheckLogin包裹一下这个组件

本文地址：https://blog.csdn.net/qq_38053677/article/details/109231289