reactjs – 如何在页面重新加载时重置react-router

发布时间：2020-12-15 05:04:10 所属栏目：百科来源：网络整理

导读：使用“react-router”：“^ 3.0.2”, 当我重新加载页面时,我需要它转到它当前正在执行的默认视图.但是,历史记录中的实际路径仍然与我刷新时的路径相同.因此,该组件在不应该的时候进行重新安装. 路由历史 export const browserHistory = useRouterHistory(use

使用“react-router”：“^ 3.0.2”,

当我重新加载页面时,我需要它转到它当前正在执行的默认视图.但是,历史记录中的实际路径仍然与我刷新时的路径相同.因此,该组件在不应该的时候进行重新安装.

路由历史

export const browserHistory = useRouterHistory(useBeforeUnload(createHistory))()

路线

<Router history={browserHistory}>
    <Route path='/' name='Auth' component={Auth}>
      <IndexRoute
        component={Dashboard}
        onEnter={(nextState,replace) => replace('/login')} />
      <Route path='dashboard' name='Dashboard' component={Dashboard} />
      <Route path='resources' name='Resources' component={Resources} />
      <Route path='users' name='Users' component={UsersContainer} />
      <Route path='user/:params' name='User' component={UserContainer} />
    </Route>
    <Route path='/' name='NoAuth' component={NoAuth}>
      <Route path='login' name='Login Page' component={Login} />
    </Route>
  </Router>

这是我检查用户是否仍然拥有有效会话令牌以及如何重新路由到仪表板的方法.不确定我是否这样做是最好的方式.

const _checkAuth = () => {
  if (profile) {
    const res = JSON.parse(profile)
    store.dispatch({ type: types.LOGIN_IDENTITY_SUCCESS,res })
    console.log(browserHistory.getCurrentLocation().pathname)
    router.replace('/dashboard')
  }
}

_checkAuth()

如果你想用react-router推进到一个新的路由,你可以使用.push方法将另一个路由推送到堆栈上,如果你正在寻找的话,这将不会删除历史记录中的第一条路线,但它会正确地将新路由推入react-router

const _checkAuth = () => {
  if (profile) {
    const res = JSON.parse(profile)
    store.dispatch({ type: types.LOGIN_IDENTITY_SUCCESS,res })
    console.log(browserHistory.getCurrentLocation().pathname)
    browserHistory.push('/dashboard');
  }
}

_checkAuth()

只需用browserHistory.push(‘/ dashboard’)替换router.replace(‘/ dashboard’)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!