Connected-react-router: gettingproptype errors. location and action are marked as required

[shivgarg5676]

checkPropTypes.js?5679:19 Warning: Failed prop type: The prop location is marked as required in ConnectedRouter, but its value is undefined.
in ConnectedRouter (created by Connect(ConnectedRouter))
in Connect(ConnectedRouter) (created by Root)
in PersistGate (created by Root)
in Provider (created by Root)
in Root
in AppContainer
printWarning @ checkPropTypes.js?5679:19
checkPropTypes.js?5679:19 Warning: Failed prop type: The prop action is marked as required in ConnectedRouter, but its value is undefined.
in ConnectedRouter (created by Connect(ConnectedRouter))
in Connect(ConnectedRouter) (created by Root)
in PersistGate (created by Root)
in Provider (created by Root)
in Root
in AppContainer

Any idea why i might be getting these warnings

[mmoyles87]

I was getting the same errors. I was passing null into routerMiddleware(history) because history didn't exist. I had to import history from my history module.

`
// in store.js
import { history } from '../../startup/client/history';

// my history module
import { createBrowserHistory as createHistory } from 'history';

export const history = createHistory();

export default history;
`

[sudheeshcm]

@dubvfan87 I'm also getting the same problem.
What exactly do we have to import here?
import { history } from '../../startup/client/history';

[mmoyles87]

@sudheeshcm Basically you need to run createHistory() somewhere in your code

`
import { createBrowserHistory as createHistory } from 'history';

export const history = createHistory();
`

and then add it to middleware where you create your store

`
import { connectRouter, routerMiddleware } from 'connected-react-router';

const middleware = [thunk, routerMiddleware(history)];

const enhancer = compose(
applyMiddleware(...middleware),
devtools,
);

const store = createStore(
connectRouter(history)(rootReducer),
enhancer,
);

`

[schrizsz]

I have the same issue I am passing the history, but it's still complaining
store.js:

import createHistory from 'history/createBrowserHistory';

export const history = createHistory();
console.log(history); // { object with location, action etc }
const middleWares = [routerMiddleware(history)];

in index.js i have

import { store, history } from './store';

const rootElement = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>

// handle location change as wrapping it (as the library suggests) does not work with our reducer structure function reducer(state = initialState, { type, payload }) { if (type === LOCATION_CHANGE) { return { ...state, router: payload }; } return payload || state; }

but it's still complaining Warning: Failed prop type: The prop location is marked as required in `ConnectedRouter`, but its value is undefined.

[Lyfme]

maybe, you can do this

import { routerMiddleware, connectRouter } from 'connected-react-router'
....
const store = createStore(connectRouter(history)(rootReducer), middleware)
....

[Nase00]

Update: Fixed! Followed the Breaking Changes guide on the release page here to make the errors go away.

---

I'm getting these propType errors on 5.0.0. Didn't get them on 4.5.0. No problems with any routing functionality on either version.

// history.js
const history = createBrowserHistory();

// store.js
const store = createStore(
  connectRouter(history)(rootReducer),
  compose(applyMiddleware(routerMiddleware(history), api))
);

// ducks/index.js
export default combineReducers({
  navigationReducer,
  layoutReducer,
  router: connectRouter(history)
});

// routes.jsx
const Routes = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      ...

[vincelawdev]

@Nase00 I can confirm that I am getting these errors after upgrading to 5.0.0 and above. Reverting it back to 4.5.0 was the solution for me.

[MaxSvargal]

Where is a fix of this?

[vincelawdev]

I have a feeling the fix is here in the release notes: https://github.com/supasate/connected-react-router/releases

However, I do not have the time to change my code to make it work with 5.0.0. I will do it when I have more time.

[urikphytech]

I followed the v5 docs and was getting this error. My problem was that my reducer was called routing instead of router

[sebastianhealthiq]

I had this issue using the immutable version of connected-react-router, just had to replace all imports with:
import { ..whatever.. } from 'connected-react-router/immutable'

Also make sure your equivalent of App.js is defined like:

const App = ({ history }) => {
  // whatever..
}

App.propTypes = {
  history: PropTypes.object,
}

export default App