Question

我正在尝试运行旧的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)

我尝试安装不同版本的react-router和历史记录，但仍然出现相同的错误，代码看起来不错，所以我不确定问题可能在哪里。

这是我的“ 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"
  }
}

这是在React版本0.14.3和react-router和历史版本1中编写的。

Main.jsx

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


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

下面我有一些嵌套的路由，问题似乎出在它试图根据此处的路由来解析Base.jsx组件上的this.props.children时：

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的新手，我无法运行此东西。

React-router历史记录：未捕获的TypeError：无法读取未定义的属性“位置”

0 个答案: