Uncaught TypeError: Cannot read property 'location' of undefined

[stefensuhat]

Version Latest Version

History: ^2.1.2 React Router: ^3.0.0

Steps to reproduce

    const createStoreWithMiddleware = compose(applyMiddleware(reduxThunk, logger),
    reduxReactRouter({ routes, createHistory }));

const store = createStoreWithMiddleware(createStore)(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <ReduxRouter>
            <Route path="/">
                <Route path="login" component={Login} />
                <Route path="/" component={App}>
                    <IndexRoute component={Welcome} onEnter={RequireAuth} />
                    <Route path='logout' component={Logout} onEnter={RequireAuth} />
                </Route>
            </Route>
        </ReduxRouter>
    </Provider>
    , document.querySelector('.main')
);

Actual Behavior

When I ran my code it return me Uncaught TypeError: Cannot read property 'location' of undefined

any solution?

[mjrussell]

Your version of history (3.x) is unsupported. Downgrading to 2.x should work. See https://github.com/acdlite/redux-router/issues/259

[stefensuhat]

@mjrussell I've downgrade my history "history": "^2.0.0", but still show same error.

[mjrussell]

Hm I dont know then, I would have to see a runnable example. Most likely a configuration error though. Are you doing server side rendering? Hash history doesn't work in SSR.

[hobenkr88]

I've run into this issue with history@3 as well. I tried reverting to history@2 but that then produces the error history.getCurrentLocation is not a function. Tried to work out what was happening myself, but too many libraries I'm not very familiar with. I created a repo based on the "basic example" to try and get anyone else up and running who might be more capable of looking into this.

[mjrussell]

Thanks for creating the example. I'll try to look this week/weekend.

[supasate]

@ssuhat @hobenkr88 Try downgrading react-router from 3.x to 2.x with history version 2.x.

[stefensuhat]

@supasate sorry can't try that. I can't do any major changes anymore.

[mjrussell]

Technically React Router 3 is API backwards compatible with React Router 2. Redux-Router relies on some internals of React Router and this may be the source of the issue. But downgrading React Router from 3.x to 2.x shouldnt affect your code

[csillag]

I can confirm that using react-router v2.8.1 fixes this problem.

[jai1255]

v3.0.0 is working no issues

[thanhnhan2tn]

+1 I have same issue from react-router v4.0

[jai1255]

@thanhnhan2tn use v3.0.0 it will work

[jonatassaraiva]

npm install react-router@3.0.5

[dmsergeev]

Thanks for the help! I wonder if there's an open issue for this problem

[KalpanaPagariya]

I have upgraded my react router to 4.1.1, and history 4.6.1 and I am facing same issue

Uncaught TypeError: Cannot read property 'location' of undefined at new Router (Router.js:31)

Without changing version, is it possible to fix in the code?

[gazpachu]

I'm having the same issue as @KalpanaPagariya. This is my store.jsx file:

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './reducers/index';

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory({ basename: '/lighthouse' });

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history);

const store = createStore(rootReducer, compose(applyMiddleware(middleware), applyMiddleware(thunk), window.devToolsExtension
  ? window.devToolsExtension()
  : f => f));

export default store;

And my routes:

ReactDOM.render(
  <Provider store={store}>
    <Router
      onUpdate={() => {
        window.scrollTo(0, 0);
        logPageView();
      }} history={history}
    >
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/favourites" component={Cards} type="favourites" />
        <Route path="/inbox" component={Cards} type="inbox" />
        <Route path="/insights" component={Insight} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
  </Provider>, document.getElementById('react-root'));

Can anyone provide the correct working versions for react-router, react-router-redux and history?

[gazpachu]

If I apply the middleware like this const store = createStore(rootReducer, compose(applyMiddleware(middleware, thunk), then I get this error:

Router.js?a4aa:87 Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined

[gazpachu]

@mjrussell @Scarysize any idea of how can I fix the issue? thanks

[gazpachu]

I've fixed the location of undefined issue by adding export to the history const. But then I had to downgrade the history library to 3.3.0 and then now I get this error: Uncaught Error: Cannot find module "history/createBrowserHistory". So I think I will revert everything back to the old versions :/

[gabouh]

csillag thanks a lot :+1: actually downgrade to 2.8.1 and it worked

[adithyamaheshb]

Downgrading to react-router@2.8.1 and history@2.0.0 works but the following warning occurs Warning: [react-router] Router no longer defaults the history prop to hash history. Please use the hashHistory singleton instead. http://tiny.cc/router-defaulthistory

[jesster2k10]

Downgrading won't work with React 16 as prop-types is no longer included in React

[mojave27]

@gazpachu I haven't tried adding redux yet, but to get basic routing to work, I had to use the following versions:

    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-router": "^2.0.0",

Those were downgraded from react@16, react-dom@16, and react-router@4.x.

[mklaudia]

Try to import BrowserRouter: import {BrowserRouter as Router, Route} from 'react-router-dom'; //"react": "^16.2.0", //"react-dom": "^16.2.0" //"react-router-dom": "^4.2.2",

[sky-gg]

'BrowserRouter as Router' It has to exist,or else will be error.

import React from 'react'
import { Switch, BrowserRouter as Router, Route } from "react-router-dom";
import LoginComp from '../pages/pageA'
import RegistComp from '../pages/pageB'

export default () => (
    <Router>
        <Switch>
            <Route path="/m" component={LoginComp}></Route>
            <Route path="/" component={RegistComp}></Route>
        </Switch>
    </Router>
)

[nateshmbhat]

For me the the problem was specifying "Component" instead of "component" (with a lower case )

[krish5]

As sky-gg said, We have to include ->'BrowserRouter as Router' It has to exist,or else will be error.

The error got cleared and page loaded successfully :)

[enieber]

thanks @sky-gg your solution work for me!!

[406250613]

dont know where is wrong,who can find reason..thanks

[guptshruti2003]

could nt find solution .Plz let me know if anyone has solution