onEnter转换与反应路由器和Redux简单路由器不渲染新路由的组件 [英] onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component

问题描述

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

I have an app using react @0.14, redux @3.05, react-router @1.0.3, and redux-simple-router @2.0.2. I'm trying to configure onEnter transitions for some of my routes based on store state. The transition hooks successfully fire and push new state to my store, which changes the url. However, the actual component that is rendered on the page is the original component handler from the route match, not the new component handler for the new 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的组件

Here is my Root.js component that gets inserted into the 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 - >路由器 - >位置 - > pathname 是'/ login'。

To clarify, if I go to '/workouts', it will fire the onEnter authTransition hook, dispatch the redux-simple-router push action, change the url to '/login', but will display the Workout component on the page. Looking in Redux DevTools shows that state -> router -> location -> pathname is '/login'.

状态流是

1. @@ INIT


2. @@ ROUTER / UPDATE_LOCATION（/ workouts）


3. @@ ROUTER / UPDATE_LOCATION（/ login）

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

Am I passing the store to the routes incorrectly? I can't figure out why the next Router/Update_Location doesn't work

推荐答案

原来你想要使用反应 - 路由器api（替换），而不是用于控制转换的redux-simple-router。

Turns out you want to use the react-router api (replace), not the redux-simple-router to control your transitions.

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个单独的参数。

Also, be careful. I saw a lot of documentation out there for the react-router replace where you pass a single object. That's for react-router 2.0-rc*. If you're using react-router 1.0, you're going to want to pass replace 3 separate arguments.

这篇关于onEnter转换与反应路由器和Redux简单路由器不渲染新路由的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！