score:12

Accepted answer

Make you routes a function that takes the store in parameter

export default (store) => {
 return (
  <Route handler={App} path="/">
    <Route path="mypath" component={handler} onEnter={myHook(store)}>
  <Route>
 )
};

Do the same in your transition hook

export const myHook = (store) => {
  return (location, replaceWith) => {
    // Do something with your store
  }
};

Then assuming your create your store and your router in the same file

const router = (
            <Provider store={store}>
                <Router history={history}>
                    {routes(store)}
                </Router>
            </Provider>
        );

score:1

Version 4 of React Router migration documentation recommends using your component lifecycle methods to handle changes.

For example use componentWillMount instead of onEnter or respond to changes of state via componentWillReceiveProps.

So in your component itself:

import { browserHistory } from 'react-router';

...

componentWillMount() {
  if (someConditionIsTrue) {
    browserHistory.push('/your/new/path');
  }
}

For bonus points you could write this as a Higher Order Component that simply wraps your original component. Making it easier to share this logic among any other components that require the same behaviour.

score:4

You might create file store.js and export final store (the same you pass to redux)

E.g.

import configureStore from 'utils/configure-store.js';

const store = configureStore();
export default store;

and then import to your router file and read state by store.getState()


Related Query

More Query from same tag