Clever Geek Handbook

React JS Cannot read property 'location' from undefined

This is my first time to use React JS

, I am stuck with this error,

I am trying to find out how to react to the router from this video also watched it several times, but I still cannot find and solve the problem:

package.json

{
      "name": "cobareact",
      "version": "1.0.0",
      "description": "app pertama react",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.24.1",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "history": "^1.17.0",
        "react": "^15.5.4",
        "react-dom": "^15.5.4",
        "react-router": "^4.1.1",
        "react-router-dom": "^4.1.1",
        "webpack": "^2.5.1",
        "webpack-dev-server": "^2.4.5"
      },
      "devDependencies": {
        "webpack": "^2.5.1"
      }
    }

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import App from './App.jsx';
import About from './About.js';
import Add from './Add.js';

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path='' component={App}>
            <IndexRoute component={About}></IndexRoute>
            <Route path='about' component={About}></Route>
            <Route path='add' component={Add}></Route>
        </Route>
    </Router>, 
    document.getElementById('app')
);

App.jsx

import React from 'react';
import ButtonAdd from './ButtonAdd';
import ButtonAbout from './ButtonAbout';
import Contacts from './Contacts';
import { Link } from 'react-router';

class App extends React.Component{
   render() {
      return (
        <div>
            <div>
               {this.props.children}
               <div><Link to="add"><ButtonAdd /></Link><Link to="about"><ButtonAbout /></Link></div>
               <h1>Contact Book</h1>
            </div>
            <div>
               <Contacts lists={CONTACTS} />
            </div>
        </div>
      );
   }
}

export default App;

Mistake

Uncaught TypeError: Cannot read property 'location' of undefined`enter code here`

warning

Warning: Invalid prop type: propeller history

marked as required in Router

but its value undefined

. in the router

+3


source to share


3 answers


Hash history has been replaced with HashRouter

which has been moved to a new package

import { HashRouter } from 'react-router-dom'


More details here:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

+1


source


When writing in React Router v4, you need to take care of the following facts:



  • hashHistory

    is no longer supported. If you want to achieve the same you should use HashRouter .

  • <IndexRoute>

    replaced by regular <Route>

    . Add exact

    prop to routes.

  • Nested Routes

    are no longer supported. You have to set nested routes inside child components.

    import { HashRouter, Route } from 'react-router-dom';

ReactDOM.render(
 <HashRouter>
    <Route path='' component={App}/>
 </HashRouter>, 
document.getElementById('app'));
+1


source


you are watching the video from februari 2016, the react router api has completely changed, it is completely rewritten. I saw that they are using the 1st router in the router. You are using reactive router 4. I haven't dived into router 4 yet, but they should treat this.props.children like this, for example

import Component from './Component.js';
import OtherComponent from './OtherComponent';

<Component>
  <OtherComponent />
</Component>

in the Component.js file another OtherComponent.js wil be available at this.props.children

so for example ur code expects some props to be available in props (.children), which I assume are not being passed by router 4.

More info: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom/docs/api or downgrade to the react-router version they use in the video.

but they also provide some tutorials like egghead to react router v4

0


source






More articles:


All Articles