Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Router cannot read property string of undefined

I am new to React and I am building my first application with React, Redux, and React Router, so far I have successfully set up my boiler plate, however when I want to use React-Router and create routes I get the following error

TypeError: Cannot read property 'string' of undefined
./node_modules/react-router-dom/es/BrowserRouter.js
node_modules/react-router-dom/es/BrowserRouter.js:38
  35 | }(React.Component);
  36 | 
  37 | BrowserRouter.propTypes = {
> 38 |   basename: PropTypes.string,
  39 |   forceRefresh: PropTypes.bool,
  40 |   getUserConfirmation: PropTypes.func,
  41 |   keyLength: PropTypes.number,

This only happens when I try to import and use

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

Here is my index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store'

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

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

class Hello extends Component {
  render(){
    return(
      <div>Hello</div>
    )
  }
}


class GoodBye extends Component {
  render(){
    return(
      <div>GoodBye</div>
    )
  }
}

ReactDOM.render(<Provider store={store}>
  <BrowserRouter>
    <Route path="/hello" component={Hello}/>
    <Route path="/goodbye" component={GoodBye}/>
  </BrowserRouter>
  </Provider>, document.getElementById('root'));
registerServiceWorker();

And my package.json

{
  "name": "reactreduxrouterblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.0.0-rc5",
    "react-router-dom": "^4.0.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Any knowledge will be welcomed thanks!

like image 718
hwe Avatar asked Oct 11 '17 19:10

hwe


People also ask

How do you fix Cannot read property of undefined In react?

The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the classes' constructor method.

What is BrowserRouter in react router?

React Router is a standard library for routing in React. It enables navigation between views from different components in a React application, allows the browser URL to be changed, and keeps the UI in sync with the URL.


4 Answers

Update your react-router-dom in package.json: react-router-dom ^4.2.2

like image 169
Manuel Bautista Avatar answered Nov 15 '22 15:11

Manuel Bautista


Sometimes it may cause due to incompatible versions of "react-router-dom" and "react-router-prop-types". For me it worked with following configuration.

react-router-dom:"^4.2.2",
react-router-prop-type:"^3.2.1"
like image 40
Tharindu Hewawitharana Avatar answered Nov 15 '22 14:11

Tharindu Hewawitharana


Try adding the PropTypes package to your app.

basename: PropTypes.string

Looks like you are just missing that package.

EDIT:

Be sure to run npm install to install all dependencies.

like image 33
Chase DeAnda Avatar answered Nov 15 '22 16:11

Chase DeAnda


import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line


App.propTypes = {
    monkey: PropTypes.string,           <--omit "React."
    cat: PropTypes.number.isRequired    <--omit "React."
};


//Wrong:  React.PropTypes.string
//Right:  PropTypes.string
like image 42
Michael Avatar answered Nov 15 '22 16:11

Michael