反应路由器失败的道具“历史"，未定义 [英] React Router failed prop 'history', is undefined

问题描述

我一直在关注 Tyler Mcginnis 的教程，并在 React 路由器上遇到了障碍，特别是在历史方面.我最终逐字复制了他的代码只是为了看看它是否只有我，但我仍然得到

I've been following along Tyler Mcginnis' tutorial and hit a snag with the react router, specifically with history. I ended up copying his code verbatim just to see if it was only me, but I'm still getting

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 模块中，而是 createBrowserHistory 内有一个 createBrowserHistory代码>历史模块.按照我找到的 API 文档，我想我必须通过以下方式调用它:

What I noticed was that hashHistory doesn't exist in the react-router module, but rather there is a createBrowserHistory inside the history module. Following the API doc I found, I figured I must call it through there as:

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

这样做会产生 createBrowserHistory 不是函数 错误.删除括号，会导致上述相同的错误，说明历史是 undefined.

Doing that produces an createBrowserHistory is not a function error. Removing paranthesis, results in the same errors above stating history is undefined.

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

When I log history, it's definitely undefined, which makes me believe the issue has to do with the import statement, but wouldn't the console tell me ReactRouter.hashHistory could not be found?

我知道这个教程已经有一年了，API 可能发生了一些我不知道的变化，这就是我的问题所在.任何帮助表示赞赏！

I understand this tutorial is a year old and there have probably been changes to the API I just not aware of, and that's where my issue lies. Any help is appreciated!

推荐答案

Router v4 有点不同

Router v4 is a little bit different

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'));

这篇关于反应路由器失败的道具“历史"，未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！