переходы onEnter с помощью React Router и Redux Simple Router не отображают компонент нового маршрута

у меня есть приложение, использующее react @0.14, redux @3.05, react-router @1.0.3 и redux-simple-router @2.0.2. Я пытаюсь настроить переходы onEnter для некоторых из моих маршрутов на основе состояния хранилища. Крючки перехода успешно срабатывают и нажимают новое состояние в мой магазин, который изменяет url-адрес. Однако фактический компонент, отображаемый на странице, является исходным обработчиком компонента из сопоставления маршрута, а не новым обработчиком компонента для нового 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", он запустит крючок authTransition onEnter, отправит действие нажатия redux-simple-router, изменит url на "/login", но отобразит компонент тренировки на странице. Глядя в Redux DevTools показывает, что state -> router -> location -> pathname is '/ login'.

состояние потока is

  1. @@INIT
  2. @ @ ROUTER / UPDATE_LOCATION (/тренировки)
  3. @ @ ROUTER / UPDATE_LOCATION (/login)

я неправильно передаю магазин маршрутам? Я не могу понять, почему следующий маршрутизатор / Update_Location не работает

7
javascript react-router react-router-redux reactjs redux

1 ответов

оказывается, вы хотите использовать api react-router (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-router 2.0-rc*. Если вы используете react-router 1.0, вы захотите передать replace 3 отдельных аргумента.

12