onEnter使用React Router和Redux Simple Router转换时不呈现新路由的组件

Question

我有一个应用程序使用react@0.14、redux@3.05、react-router@1.0.3和redux-simple-router@2.0.2。我正在尝试根据存储状态为我的一些路由配置onEnter转换。转换钩子成功激发并将新状态推送到我的存储区，这将更改URL。但是，在页面上呈现的实际组件是路由匹配中的原始组件处理程序，而不是新URL的新html" target="_blank">组件处理程序。

下面是我的routes.js文件的外观

export default function configRoutes(store) {
  const authTransition = function authTransition(location, replaceWith) {
    const state = store.getState()
    const user = state.user

    if (!user.isAuthenticated) {
      store.dispatch(routeActions.push('/login'))
    }
  }

  return (
    <Route component={App}>
      <Route path="/" component={Home}/>
      <Route path="/login" component={Login}/>
      <Route path="/dashboard" component={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" component={Workout} onEnter={authTransition}>
        <IndexRoute component={WorkoutsView}/>
        <Route path="/workouts/create" component={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

下面是插入DOM的root.js组件

export default class Root extends React.Component {
  render() {
    const { store, history } = this.props
    const routes = configRoutes(store)

    return (
      <Provider store={store}>
        <div>
          {isDev ? <DevTools /> : null}
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }
}

为了说明一下，如果我转到“/workouts”，它将激发onEnter authTransition钩子，分派redux-simple-router推送操作，将url更改为“/login”，但将在页面上显示Workout组件。查看Redux DevTools显示状态->Router->Location->PathName是“/login”。

状态流为

1. @@init
2. @@router/update_location(/workouts)
3. @@router/update_location(/login)

我是不是不正确地通过了商店的路线？我不明白为什么下一个router/update_location不起作用

Answer 1

结果是您希望使用react-router api（replace）而不是redux-simple-router来控制转换。

const authTransition = function authTransition(nextState, replace, callback) {
  const state = store.getState()
  const user = state.user

  // todo: in react-router 2.0, you can pass a single object to replace :)
  if (!user.isAuthenticated) {
    replace({ nextPathname: nextState.location.pathname }, '/login', nextState.location.query)
  }

  callback()
}

还有，要小心。我看到了很多关于react-router替换的文档，在这里您可以传递单个对象。这是针对React-Router2.0-RC*的。如果您使用的是React-Router1.0，您将希望传递replace 3个单独的参数。