redux-router
redux-router copied to clipboard
acdlite
Uncaught TypeError: Cannot read property 'location' of undefined
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?
Your version of history (3.x) is unsupported. Downgrading to 2.x should work. See https://github.com/acdlite/redux-router/issues/259
@mjrussell I've downgrade my history "history": "^2.0.0", but still show same error.
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.
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.
@ssuhat @hobenkr88 Try downgrading react-router from 3.x to 2.x with history version 2.x.
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
I have same issue from react-router v4.0
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?
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?
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
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 :/
Downgrading to [email protected] and [email protected] 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
Downgrading won't work with React 16 as prop-types is no longer included in React
@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 [email protected].
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",
'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>
)
For me the the problem was specifying "Component" instead of "component" (with a lower case )
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 :)
dont know where is wrong,who can find reason..thanks
