onEnter转换与反应路由器和Redux简单路由器不渲染新路由的组件

Question

我有一个应用程序使用react @ 0.14,redux @ 3.05,react-router @ 1.0.3和redux-simple-router @ 2.0.2.我正在尝试根据存储状态为某些路由配置onEnter转换.转换挂钩成功触发并将新状态推送到我的商店,这会更改网址.但是,在页面上呈现的实际组件是路由匹配的原始组件处理程序,而不是新URL的新组件处理程序.

这是我的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>
  )
}

这是我的Root.js组件插入到DOM中

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显示的state -> router -> location -> pathname是'/ login'.

国家流动是

1. @@在里面
2. @@ ROUTER/UPDATE_LOCATION(/ workouts)
3. @@ ROUTER/UPDATE_LOCATION(/ login)

我是否错误地将商店送到了路线？我无法弄清楚为什么下一个Router/Update_Location不起作用

Answer 1

事实证明,您希望使用react-router api(替换),而不是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 2.0-rc*.如果您正在使用react-router 1.0,那么您将要传递替换3个单独的参数.