react实例——学生管理系统遇到的问题2

遇到的问题：

1.useLocation造成的当前组件二次刷新，使用const {state:{stuId,identify,username}} = useLocation();报错，找不到userId属性

useNavigate()页面跳转，与useLocation()获取数据，useLocation()的工作机制：监听上一个url到当前页面的url，如果变化，就会渲染当前页面，所以，当在useLocation（）所在组件中点击路由跳转时，页面刷新会出现当前组件第二次渲染且直接解构获取不到值，找不到userId属性。 A-->B,是因为useNavigate（）传递了数据，但是B-->C并没有useNavigate（），C作为B的子路由，路由变化，监听、解构报错。

解决方法：

采用useState，在第一次登录时，就把数据存储下来，且加入判断，当location中的state不为空时存起来，为空不操作，第一次进入时，肯定有数据，后面的路由跳转由于属于B-->C,useLocation()监听到的state为空，不影响。但是当前页面刷新后，location为空，usestate也刷新了。

  const location = useLocation();
  const getUserInfo = ()=>{
    if(location.state) return location.state; 
  }
  // 创建Login组件的状态
  const [userInfo] = useState(getUserInfo);

考虑一下Link与push以及缓存。

选择跳转的方式，我把它分为：

非条件式跳转：跳转前没有判断逻辑的，NavLink、Link

可条件式跳转：push、useNavigate()

2.子路由跳转失效

路由变了，页面没变？

检查是样式是否引入；检查目标页面是否有二次渲染等数据错误，尤其是useLocation，它需要useEffert来监听。

搜索

复制