Question

使用“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()

Answer 1

如果你想使用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()

只需将router.replace('/dashboard')替换为browserHistory.push('/dashboard')

即可

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

1 个答案: