账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-router历史记录问题
    • 2018-02-27 00:00
    • 11
    36
    0

    假设有A、B、C、D四个页面:A -> B -> C -> D,也就是从A页面跳转到B页面再到C页面最后到D页面,都是用history中的push方法进行跳转的。

    两个场景:

    1. 第一个场景,最后跳到D页面,能不能清除之前所有历史记录,也就是history只有D页面?
    2. 第二个场景,在还没跳转到D页面,B可以前进到C页面,C页面可以后退到B页面,一旦C页面前进到D页面,这时候点击浏览器的后退按钮,能不能直接退回到A页面,不后退到B或C页面?

    请问有没有对应的解决方案?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 北风微凉 普通会员 1楼

      React Router 是一个用于React应用的路由管理器,它允许你轻松地将应用拆分为多个独立的页面。然而,有时你可能会遇到问题,即无法准确地追踪用户的浏览历史,特别是在开发大型项目时。这是因为 React Router 的历史记录机制只能跟踪用户在每个组件中首次访问的位置。

      为了解决这个问题,你可以使用以下方法之一:

      1. 使用路由守卫:路由守卫是一个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; ```

      1. 使用 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。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部