javascript - onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component - Stack Ove

admin管理员组

文章数量:1244258

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 ponent that is rendered on the page is the original ponent handler from the route match, not the new ponent 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 ponent={App}>
      <Route path="/" ponent={Home}/>
      <Route path="/login" ponent={Login}/>
      <Route path="/dashboard" ponent={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" ponent={Workout} onEnter={authTransition}>
        <IndexRoute ponent={WorkoutsView}/>
        <Route path="/workouts/create" ponent={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

Here is my Root.js ponent 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 ponent 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

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 ponent that is rendered on the page is the original ponent handler from the route match, not the new ponent 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 ponent={App}>
      <Route path="/" ponent={Home}/>
      <Route path="/login" ponent={Login}/>
      <Route path="/dashboard" ponent={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" ponent={Workout} onEnter={authTransition}>
        <IndexRoute ponent={WorkoutsView}/>
        <Route path="/workouts/create" ponent={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

Here is my Root.js ponent 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 ponent 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

• javascript
• reactjs
• react-router
• redux
• react-router-redux

Share Improve this question Follow edited Mar 9, 2016 at 23:59 Jeremy Banks - Vive le Canada 130k8888 gold badges358358 silver badges381381 bronze badges asked Jan 21, 2016 at 16:52 JonJon 6,26544 gold badges2323 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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.

本文标签：