История React-router: Uncaught TypeError: Невозможно прочитать свойство 'location' из неопределенного - PullRequest
Новая
       23

История React-router: Uncaught TypeError: Невозможно прочитать свойство 'location' из неопределенного

0 голосов
/ 25 ноября 2018

Я пытаюсь запустить старое приложение React и получаю эту ошибку: 

Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (main.js:1903)
    at ReactCompositeComponentWrapper.mountComponent (main.js:9251)
    at Object.mountComponent (main.js:16713)
    at ReactCompositeComponentWrapper.mountComponent (main.js:9323)
    at Object.mountComponent (main.js:16713)
    at mountComponentIntoNode (main.js:14601)
    at ReactReconcileTransaction.perform (main.js:19365)
    at batchedMountComponentIntoNode (main.js:14617)
    at ReactDefaultBatchingStrategyTransaction.perform (main.js:19365)
    at Object.batchedUpdates (main.js:12197)

Я пытался установить разные версии реакции-маршрутизатора и историю, но все равно продолжаю получать то же самоеошибка, код выглядит нормально, поэтому я не уверен, где проблема может быть.

Это мой 'package.json': 

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "watchify src/main.jsx -v -t [ babelify --presets [ react ] ] -o public/js/main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "babel-preset-react": "^6.1.18",
    "babelify": "^7.2.0",
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.2",
    "watchify": "^3.6.1"
  }
}

Это было написано в версии 0.14 реакции.3 с реакции-маршрутизатором и историей версии 1.

Main.jsx 

let React = require('react');
let ReactDOM = require('react-dom');
let Routes = require('./Routes.jsx');


ReactDOM.render(Routes, document.getElementById('main'));

Ниже у меня есть несколько вложенных маршрутов, проблема, кажется, когда он пытается разрешить this.props.children наКомпонент Base.jsx на основе маршрутов здесь:

Routes.jsx 

let React = require('react');
let ReactRouter = require('react-router');
let Router = ReactRouter.Router;
let Route = ReactRouter.Route;
let Base = require('./components/Base.jsx');
let Page1 = require('./components/Page1.jsx');
let Page2 = require('./components/Page2.jsx');

let Routes = (    
  <Router>    
    <Route path="/" component={Base}>
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
);

module.exports = Routes;

Ниже, не уверен, если проблема заключается в разрешении this.props.children

Base.jsx 

let React = require('react');

let Base = React.createClass({
  render: function(){
    return(
      <div>
        <h1>Header</h1>
        {this.props.children}     
        <h1>Footer</h1>
      </div>
    );
  }
});

module.exports = Base;

Page1.jsx 

let React = require('react');

let Page1 = React.createClass({
  render: function(){
    return(
      <h1>Page 1</h1>
    );
  }
});

module.exports = Page1;

Page2.jsx 

let React = require('react');

let Page2 = React.createClass({
  render: function(){
    return(
      <h1>Page 2</h1>
    );
  }
});

module.exports = Page2;

index.html 

<!DOCTYPE html>
<html>
    <head>
        <title>React Routing</title>
    </head>
    <body>
        <div id="main">
        </div>
    <script src="js/main.js"></script>
    </body>
</html>

Любая помощьБуду очень признателен, я новичок в React и не могу запустить эту штуку.

...