Question

React Router 失败 prop‘history’，未定义

2017-03-16

17524

reactjs react-router

我一直在关注 Tyler Mcginnis 的教程，但在使用 React Router 时遇到了问题，特别是历史记录。我最终逐字逐句地复制了他的代码，只是为了看看是不是只有我一个人遇到这个问题，但我仍然得到

Warning: React.createElement: type is invalid -- expected a string (for built-
in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's 
defined in.

Warning: Failed prop type: The prop `history` is marked as required in 
`Router`, but its value is `undefined`. in Router

Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (index_bundle.js:8347)
at index_bundle.js:19079
at measureLifeCyclePerf (index_bundle.js:18859)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (index_bundle.js:19078)
at ReactCompositeComponentWrapper._constructComponent (index_bundle.js:19064)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:18972)
at Object.mountComponent (index_bundle.js:4070)
at ReactCompositeComponentWrapper.performInitialMount (index_bundle.js:19155)
at ReactCompositeComponentWrapper.mountComponent (index_bundle.js:19042)
at Object.mountComponent (index_bundle.js:4070)

实现是：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require("../components/Home");
var PromptContainer = require('../containers/PromptContainer');

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' header='Player One' component={PromptContainer} />
      <Route path='playerTwo/:playerOne' header='Player Two' component={PromptContainer} />
    </Route>
  </Router>
);

module.exports = routes;

我注意到 hashHistory 不存在于 react-router 模块中，而是在 history 模块中有一个 createBrowserHistory 。根据我找到的 API 文档，我认为我必须在那里调用它：

var BrowserHistory = require('history/createBrowserHistory);
const history = createBrowserHistory();

这样做会产生 createBrowserHistory 不是函数 错误。删除括号后，会出现上述相同的错误，指出历史记录为 undefined 。

当我记录历史记录时，它肯定是未定义的，这让我相信问题与 import 语句有关，但控制台不会告诉我找不到 ReactRouter.hashHistory 吗？

我知道本教程已有一年历史，并且 API 可能发生了我不知道的变化，这就是我的问题所在。任何帮助都非常感谢！

Answer 1

Router v4 略有不同

HashHistory

import { HashRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

render(( 
  <Router> 
    <Route exact path="/" component={App} /> 
  </Router> ), 
document.getElementById('root'));

或 BrowserHistory

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import App from './components/App'; 

render(( 
  <Router> 
    <Route exact path="/" component={App} /> 
  </Router> ), 
document.getElementById('root'));

Answer 2

var BrowserHistory = require('history/createBrowserHistory');
const history = createBrowserHistory();

您的意思是 var createBrowserHistory = require... 吗？

此外，看起来 createBrowserHistory 现在（在 v3 中）位于 history/lib/createBrowserHistory

如果这不起作用 - 您正在使用哪个版本的 react-router ？