带有 React Router 和 Redux Simple Router 的 onEnter Transitions Dont Render New Route's Component [英] 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.但是，在页面上呈现的实际组件是来自路由匹配的原始组件处理程序，而不是新 url 的新组件处理程序.

这是我的 routes.js 文件的样子

导出默认函数 configRoutes(store) {const authTransition = 函数 authTransition(位置，replaceWith){const state = store.getState()const 用户 = state.user如果(！user.isAuthenticated){store.dispatch(routeActions.push('/login'))}}返回 (<路由组件={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 组件={WorkoutsView}/><Route path="/workouts/create" component={WorkoutCreate}/></路线></路线>)}

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

export default class Root extends React.Component {使成为() {const { store, history } = this.propsconst 路由 = configRoutes(store)返回 (<提供者商店={商店}><div>{是开发?<开发工具/>: 空值}<Router history={history} children={routes}/>

</提供者>)}}

澄清一下，如果我转到/workouts"，它将触发 onEnter authTransition 钩子，分派 redux-simple-router 推送操作，将 url 更改为/login"，但会在页.查看 Redux DevTools 显示 state ->路由器 ->位置 ->路径名 是'/login'.

状态流为

1. @@INIT
2. @@ROUTER/UPDATE_LOCATION (/workouts)
3. @@ROUTER/UPDATE_LOCATION (/login)

我是否错误地将商店传递到路线?我不明白为什么下一个 Router/Update_Location 不起作用

解决方案

原来你想使用 react-router api(替换)，而不是 redux-simple-router 来控制你的转换.

const authTransition = function authTransition(nextState, replace, callback) {const state = store.getState()const 用户 = state.user//待办事项:在 react-router 2.0 中，您可以传递单个对象来替换 :)如果(！user.isAuthenticated){替换({ nextPathname: nextState.location.pathname }, '/login', nextState.location.query)}打回来()}

另外，要小心.我在那里看到了很多关于 react-router 替换你传递单个对象的文档.那是针对 react-router 2.0-rc* 的.如果您使用的是 react-router 1.0，您将需要通过替换 3 个单独的参数.

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.

Here is what my routes.js file looks like

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>
  )
}

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>
    )
  }
}

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'.

The state flow is

1. @@INIT
2. @@ROUTER/UPDATE_LOCATION (/workouts)
3. @@ROUTER/UPDATE_LOCATION (/login)

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

解决方案

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()
}

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.

这篇关于带有 React Router 和 Redux Simple Router 的 onEnter Transitions Dont Render New Route's Component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！