I try to use react-router-dom 4.0.0 library. But it send me this error

Uncaught TypeError: Cannot read property 'location' of undefined

It seems that problem in browserHistore. Before I used react-router 2.x.x and everything was alright. This is my index.js

import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import { routes } from './routes'

const store = configureStore()

render(
  <Provider store={store}>
    <Router history={hashHistory} routes={routes} />
  </Provider>,
  document.getElementById('root')
)

This is my routes

import React from 'react'
import { IndexRoute, Route } from 'react-router-dom'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'

export const routes = (
  <Route path='/' component={Main}>
    <Route path='/path' component={First} />
    <IndexRoute component={App} />
  </Route>
  )

And also for server side express I set this get configuration

app.get('*', function root(req, res) {
  res.sendFile(__dirname + '/index.html');
});

I try to use react-router-dom 4.0.0 library. But it send me this error

Uncaught TypeError: Cannot read property 'location' of undefined

It seems that problem in browserHistore. Before I used react-router 2.x.x and everything was alright. This is my index.js

import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import { routes } from './routes'

const store = configureStore()

render(
  <Provider store={store}>
    <Router history={hashHistory} routes={routes} />
  </Provider>,
  document.getElementById('root')
)

This is my routes

import React from 'react'
import { IndexRoute, Route } from 'react-router-dom'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'

export const routes = (
  <Route path='/' component={Main}>
    <Route path='/path' component={First} />
    <IndexRoute component={App} />
  </Route>
  )

And also for server side express I set this get configuration

app.get('*', function root(req, res) {
  res.sendFile(__dirname + '/index.html');
});

• javascript
• reactjs
• react-router

3 Answers 3

React Router v4 is a complete re-write and isn't compatible with previous versions as you're assuming in your code. With that said, you shouldn't expect to be able to just upgrade to a new major version (V4) and have your app work as normal. You should check out the documentation or downgrade back to V2/3. Here's some code that should get you started in the right direction

import 'babel-polyfill'
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'

const store = configureStore()

render(
  <Provider store={store}>
    <Router>
      <Route path='/' component={Main} />
      <Route path='/path' component={First} />
    </Router>
  </Provider>,
  document.getElementById('root')
)

1. Check the version of react-router-dom in package.json

2. If its version is greater than 4 then in your file import BrowserRouter :-

   import { BrowserRouter as Router, Route } from 'react-router-dom'
   

   else if its version is less than 4 then import Router :-

   import { Router, Route } from 'react-router-dom'
   

Install npm history package: npm i history

and then use it as follow in your index/routes file:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './components/App';
import './index.css'

const history = createBrowserHistory();

ReactDOM.render(
    <Router history={history}>
        <Switch>
            <Route path='/' component={App}/>
        </Switch>
    </Router>,
     document.getElementById('root')
    );