更新React路由器后，react路由器未捕获类型错误

Question

我刚刚更新了我的react-router，并将其更新到最新版本。现在我的项目一直在浏览器上给我一个错误，说“未捕获的TypeError:无法读取属性‘路由’的未定义”。

我应该怎么做来解决这个错误。这是我的package.json和webpack文件。

// Package.json

    {
  "name": "fishery-logistics",
  "version": "0.0.1",
  "description": "Fishery Logistics Weigh-in web application",
  "main": "app-server.js",
  "dependencies": {
    "babel-core": "^5.8.38",
    "babel-loader": "^5.4.2",
    "bootstrap": "^3.3.7",
    "express": "^4.14.0",
    "fixed-data-table": "^0.6.3",
    "moment": "^2.15.1",
    "mysql": "^2.11.1",
    "react": "^15.3.2",
    "react-d3": "^0.4.0",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1",
    "react-router-bootstrap": "^0.23.1",
    "socket.io": "^1.4.8",
    "socket.io-client": "^1.4.8",
    "underscore": "^1.8.3",
    "webpack": "^1.13.2"
  },
  "devDependencies": {},
  "scripts": {
    "prestart": "webpack",
    "start": "node app-server.js"
  },
  "author": "Shashika Amunawatta",
  "license": "MIT"
}

// webpack

module.exports = {
// Root client js file
entry: "./app-client.js",
// Where to put the processed file
output: {
    filename: "public/bundle.js"
},
module: {
    loaders: [{
        // When the webpack is run, babel will not run on these files
        exclude: /(node_modules|app-server.js)/,
        // Loader name
        loader: 'babel'
    }]
}
}

这是路由器处理部分。

import React from 'react';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';

import App from './components/app';
import Main from './components/main';
import CreateOrganization from './components/create-organization';
import ManageUsers from './components/manage-users';
import FldList from './components/fld-list';
import FldView from './components/fld-view';
import WeighIn from './components/weigh-in';
import MatchFlds from './components/match-flds';
import NotFound from './components/not-found';

const routes = (
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Main} />
            <Route path="create-organization" component={CreateOrganization} />
            <Route path="manage-users" component={ManageUsers} />
            <Route path="fld-list" component={FldList} />
            <Route path="fld-view/:fldId" component={FldView} />
            <Route path="weigh-in" component={WeighIn} />
            <Route path="match-flds" component={MatchFlds} />
            <Route path="**" component={NotFound} />
        </Route>
    </Router>
);

Router.run(routes, function (Handler) {
    React.render(<Handler />, document.getElementById('react-container'));
});

Answer 1

您需要使用ReactDOM.render()。从v0.14开始，React将库拆分为ReactDOM和react。这就是你在当前版本中出错的原因。

Router.run(routes, function (Handler) {
    ReactDOM.render(<Handler />, document.getElementById('react-container'));
});