我们有一个React网站,我们正在使用redux,useParams并且数据来自api,我们从redux获取一些数据并使用params将其传递给api,这样我们就可以显示动态响应,网站无需刷新即可正常工作,导航完美-1 +1但是当我们刷新时,浏览器内置的后退按钮被禁用,在某些浏览器和移动设备上它可以工作,但它会在最后一个选项卡或第一个堆栈上踢我们而不是-1,它会忘记导航。我们正在使用react 18 和 React-router-dom v6.
我希望它应该继续-1,而不是直接在网站外和最后一个选项卡上
刷新后后退按钮行为所面临的问题可能是由于浏览器处理导航堆栈和 React 应用程序状态的方式造成的。刷新页面时,浏览器通常会重置应用程序状态,包括上一个会话期间存储在内存中的任何信息(例如 Redux 存储)。
您可以采取以下几个步骤来调查并可能解决此问题:
检查 Redux 状态初始化:确保 Redux 存储正确初始化,并且页面刷新时状态正确恢复。确保保留必要的数据以避免刷新时丢失状态。
URL 参数和路由:验证您通过 useParams 传递的参数在刷新后是否已正确初始化。如果这些参数对于加载数据至关重要,请确保它们是 URL 的一部分,或者可以独立获取以重建之前的状态。
浏览器历史记录管理:React Router 在内部使用历史记录包来管理导航。确保浏览器的历史堆栈与应用程序的导航一致。您可能需要使用 React Router v6 提供的 useNavigate 钩子来处理导航,以正确控制导航事件。