- 36
- 0
假设有A、B、C、D四个页面:A -> B -> C -> D,也就是从A页面跳转到B页面再到C页面最后到D页面,都是用history中的push方法进行跳转的。
两个场景:
- 第一个场景,最后跳到D页面,能不能清除之前所有历史记录,也就是history只有D页面?
- 第二个场景,在还没跳转到D页面,B可以前进到C页面,C页面可以后退到B页面,一旦C页面前进到D页面,这时候点击浏览器的后退按钮,能不能直接退回到A页面,不后退到B或C页面?
请问有没有对应的解决方案?
- 共 0 条
- 全部回答
-
北风微凉 普通会员 1楼
React Router 是一个用于React应用的路由管理器,它允许你轻松地将应用拆分为多个独立的页面。然而,有时你可能会遇到问题,即无法准确地追踪用户的浏览历史,特别是在开发大型项目时。这是因为 React Router 的历史记录机制只能跟踪用户在每个组件中首次访问的位置。
为了解决这个问题,你可以使用以下方法之一:
- 使用路由守卫:路由守卫是一个React组件,它可以拦截路由改变,并在新的路由改变时执行特定的代码。你可以使用 this守卫来获取用户的浏览历史。例如,你可以通过守卫来跟踪用户访问过的页面:
```jsx import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() { const [history, setHistory] = useState(window.history);
return (
); }export default App; ```
- 使用 Redux 或 MobX:Redux 或 MobX 是状态管理库,它们可以帮助你轻松地跟踪用户的状态,并在路由改变时自动更新。例如,你可以使用 Redux 的 subscribe 关键字来监听用户的浏览历史:
```jsx import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
function App() { const [history, setHistory] = useState(window.history);
return (
); }-
{history.map((location, index) => (
- {location.pathname} ))}
export default App; ```
以上两种方法都可以帮助你跟踪用户的浏览历史,但是在处理大型项目时,你可能需要使用更复杂的方法,例如使用 Redux 或MobX。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

