react-router-redux cannot push new URL

Question

I am attempting to redirect inside a redux action when an error occurs. I've tried setting up react-router-redux but I'm getting the following error.

Uncaught TypeError: Cannot read property 'push' of undefined
    at middleware.js:29
    at index.js:14
    at index.js:100
    at dispatch (applyMiddleware.js:45)
    at reports-actions.js:88
    at index.js:11
    at Object.dispatch (index.js:100)
    at ReportTemplate.componentWillMount (ReportTemplate.js:54)
    at ReactCompositeComponent.js:348
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)

This is how the router and redux is being setup.

const reducers = combineReducers({
    customer: transactionTrackerCustomerReducer,
    hierarchy: transactionTrackerHierarchyReducer,
    item: transactionTrackerItemReducer,
    tender: transactionTrackerTenderReducer,
    transaction: transactionTrackerTransactionReducer,
    transactionTracker: transactionTrackerReducer,
    session: userSessionReducer,
    reports: reportsReducer
});
const middleware = applyMiddleware(createLogger(), thunk, routerMiddleware(hashHistory));
const store = createStore(reducers, compose(middleware));
ReactDOM.render(
    <Provider store={store}>
        <Router history={hashHistory}>
            <MuiThemeProvider muiTheme={getBrandTheme()}>
                <Switch>
                    <Route path="/login" component={Login}/>
                    <Route path="/" render={props => (<App/>)}/>
                </Switch>
            </MuiThemeProvider>
        </Router>
    </Provider>
    , document.getElementById('root')
);

I'm trying to use it like this

export function fetchStoreHierarchy() {

    return function (dispatch) {

        // other code ....
        dispatch(push('/login'));
     }
}

Arpit Aggarwal · Accepted Answer · 2017-05-29 16:33:23Z

3

From react-router-redux version 4, you have to import routerActions, as follows:

import { routerActions } from 'react-router-redux'

And call it's push function, as:

return function (dispatch) {
    // other code ....
    dispatch(routerActions.push('/login'));
}

edited May 29, 2017 at 16:33

answered May 29, 2017 at 16:18

Arpit Aggarwal

29.5k16 gold badges97 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vinay verma · Accepted Answer · 2017-05-29 14:32:53Z

0

you are getting error because there's no push method defined..... try calling routeActions.push('/login') like this...

import { routeActions } from 'react-router-redux';
dispatch(routeActions.push('/login'));

answered May 29, 2017 at 14:32

vinay verma

7166 silver badges8 bronze badges

Collectives™ on Stack Overflow

react-router-redux cannot push new URL

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related