Response router v ^ 4.0.0 Missed TypeError: Cannot read the 'location' property from undefined

Question

I am having problems with the reaction router (I am using version ^ 4.0.0).

this is my index.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); 

App.js is all. I post the main one here because it is not a problem (I believe)

 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App; 

and this happens when I check the console log

 Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined at new Router (Router.js:43) at ReactCompositeComponent.js:295 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294) at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188) at Object.mountComponent (ReactReconciler.js:46) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) at Object.mountComponent (ReactReconciler.js:46) 

oh and this is package.json just in case

 { "name": "teste2", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^4.0.0" }, "devDependencies": { "react-scripts": "0.9.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } 

I tested this in other places, but I did not find a way to solve it.

Thank you guys for your patience and help!

Answer 1

You are doing a few things wrong.

1. Firstly, browserHistory is not a thing in V4, so you can remove it.

2. Secondly, you import everything from react-router , it should be react-router-dom .

3. Third, react-router-dom does not export Router , instead it exports BrowserRouter , so you need to import { BrowserRouter as Router } from 'react-router-dom .

It looks like you just took your V3 application and expected it to work with v4, which is not a good idea.

Answer 2

I tried everything offered here, but did not work for me. Therefore, if I can help anyone who has a similar problem, every single tutorial that I checked is not updated to work with version 4.

Here is what I did to make it work

 import React from 'react'; import App from './App'; import ReactDOM from 'react-dom'; import { HashRouter, Route } from 'react-router-dom'; ReactDOM.render(( <HashRouter> <div> <Route path="/" render={()=><App items={temasArray}/>}/> </div> </HashRouter > ), document.getElementById('root')); 

This is the only way I was able to get it to work without any errors or warnings.

If you want to pass the details for your component, the easiest way is:

  <Route path="/" render={()=><App items={temasArray}/>}/> 

Answer 3

None of these approaches work for me. Perhaps this is the version thing:

"react": "^ 16.8.6", "react-home": "^ 16.8.6", "react-router": "^ 5.0.1", "react-scripts": "3.0.1"

I'm new to React, but it seems like a very simple thing has turned into something complicated.

Answer 4

Replace

 import { Router, Route, Link, browserHistory } from 'react-router'; 

via

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

This will start to work. This is because Reaction-Router-Home exports a BrowserRouter