javascript - 使用 HashHistory 时出现引用错误

Question

我正在学习 React 并关注 this教程。这是我的routes.js 文件:

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var historyHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;


var Main = require('../components/Main');
var Home = require('../components/Home');


var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute path='/home' component={Home} />
    </Route>
  </Router>
);

module.exports = routes;

以及 package.json 中已安装的依赖项:

  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-react": "^6.16.0",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

使用此代码，我收到此错误:ReferenceError:hashHistory 未定义

如果我删除 hashHistory，则会收到此错误:ReferenceError:历史未定义

我无法理解该错误，因为如果我不使用 hashHistory，该错误指向什么 history？

罪魁祸首(存在于 dist/index_bundle.js 中，一些生成的代码)是:

  !history.getCurrentLocation ? process.env.NODE_ENV !== 'production' ? (0, _invariant2.default)(false, 'You have provided a history object created with history v2.x or ' + 'earlier. This version of React Router is only compatible with v3 ' + 'history objects. Please upgrade to history v3.x.') : (0, _invariant2.default)(false) : void 0;

Answer 1

您正在第 5 行将 ReactRouter.hashHistory 作为 var HistoryHistory 导入。

因此，当您渲染 Router 组件时，您应该执行 History={historyHistory} 或将顶部的变量重命名为 hashHistory。

编辑:当您完全忽略历史记录时，您会得到的错误是，因为历史记录是强制性的 Prop 。