Dispatching action in redux gives error '[react-router] You cannot change ; it will be ignored

Question

I'm using reactjs, react-router & redux in my application. I'm using async actions, following is my action.js code

  signUser(state,user) {
    return function (dispatch){
      return dispatch(requestSignUp());
    }
  }


export default function requestSignUp(){
 return {
   type: Actions.REQUEST,
   signUserReducer:{
    action: Actions.REQUEST
   }
  }
 }

Following is my store.js code

const reducer = combineReducers(reducers);
let finalState = compose(applyMiddleware(thunk, logger()))(createStore)

export default function configureStore(initialState) {
  return finalState(reducer, initialState);
}

Following is my reducer.js code

export default function signUserReducer(state = initialState, action) {

if (typeof state == 'undefined') {
    return state;
}

switch (action.type) {

    case Actions.REQUEST:
        return Object.assign({}, state, {
            action: action.signUserReducer.action
        });
    default:
        return state;
}
}

Now whenever I'm dispatching an action an error displays on my browser console stating

Warning: [react-router] You cannot change 'Router routes'; it will be ignored

I tried solving this with 'react-router-redux', but it's not solving.

Can you post the part of the code where you define your routes? The issue is most likely there. — Abhishek Jain, Apr 06 '16 at 10:01
@AbhishekJain: render() { const { store, history } = this.props return ( ) } — ghost, Apr 06 '16 at 21:21
@AbhishekJain I've implemented react-redux-router but still whenever I pass action to dispatch it gives the same error — ghost, Apr 06 '16 at 22:58
http://stackoverflow.com/questions/34760825/react-route-react-hot-loader-webpack-you-cannot-change-router-routes-it-will See if this helps. This is a common problem with react-router. — Abhishek Jain, Apr 07 '16 at 08:20
@AbhishekJainThanks for the help, by making routes constant it worked, along with it I connected my each container with the provider and it worked. — ghost, Apr 08 '16 at 09:01

score 2 · Answer 1 · answered Aug 03 '16 at 05:53

2

here is the answer from the Redux creator, he left on github, I think, it makes a lot of sense

A good first step would be to look again into the error message. It’s not a random error; it actually tells what happened. It says that Router component cannot accept new value of routes prop. This means you are recreating new routes every time you render the root component, rather than create them once for the lifetime of your app, which is the scenario React Router intends to support. The conclusion is you would need to look into where you render the Router component, and make sure you don't create routes on every render.

answered Aug 03 '16 at 05:53

vitr

6,766
8
30
50

So how do we fix this :/ – Jamie Hutber Aug 14 '16 at 11:23
@JamieHutber make `const routes` constant outside the render and include like `{routes}`, see the comments above – vitr Aug 14 '16 at 11:55
Thanks for coming back to me :D Oddly I have done this already, it must be something else in the way I am setting up. I will continue to dig – Jamie Hutber Aug 14 '16 at 17:43
yes, this helped me in my app, @DennisDecoene share your code if you need a hand – vitr Aug 17 '16 at 07:45
@vitr, I have openend another question, related to this with link to the code, see http://stackoverflow.com/questions/38995841/where-do-i-update-the-location-after-an-async-dispatch-with-react-router-and-red – DDecoene Aug 17 '16 at 11:50

Dispatching action in redux gives error '[react-router] You cannot change ; it will be ignored

1 Answers1