CODEWITHSUNDEEP
reactjs
user7628486
user7628486

Reputation:

React Router doesn't work

I have built a simple app with React Router but when I try to launch that app, I get two errors in the console:

  1. The prop history is marked as required in Router, but its value is undefined.

  2. Cannot read property location of undefined

This is my code: 

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main} />
    </Router>,
    document.getElementById('app')
);

and package.json file:

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "Simple React App",
  "main": "ext.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Milad Fattahi",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^1.12.13"
  }
}

Edit:

I installed react-router-dom and changed third line of my code to this but nothing changed.

var {Route, Router, Link} = require('react-router-dom');

Upvotes: 0

Views: 301

Answers (1)

parlad
parlad

Reputation: 1163

with v4 ,you may also need to import react-router-dom. I haven't tested , but this should work.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route,IndexRoute, hashHistory } from 'react-router-dom'
var Main = require('Main');


ReactDOM.render(
<Router history={hashHistory}>
    <Route path="/" component={Main} />
</Router>,
document.getElementById('app')
);

Also , with v4,there is no need to import 'react-router' . 'react-router-dom' will do that.

Upvotes: 2

Related Questions