React Router的属性'history'未定义。

25 浏览
0 Comments

React Router的属性'history'未定义。

我一直在跟随Tyler Mcginnis的教程，但在使用react router时遇到了问题，具体是在处理history时出现了问题。我最后不得不直接复制他的代码，只是为了看看是不是只有我有这个问题，但是我仍然得到以下警告：

警告：React.createElement：类型无效--期望是一个字符串（内置组件）或一个类/函数（复合组件），但是得到的是：undefined。你可能忘记从文件中导出你的组件。
警告：Failed prop type：`history`被标记为`Router`中必须的属性，但其值为`undefined`。在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 = (
  
    
      
      
      
    
  
);
module.exports = routes;

我注意到hashHistory在react-router模块中不存在，而是在history模块中有一个createBrowserHistory。根据我找到的API文档，我发现我必须通过它来调用它：

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

这样做会产生一个createBrowserHistory不是一个函数的错误。删除括号后，结果是上面的相同错误，表示history为undefined。

当我记录history时，它明显是undefined，这让我相信问题与导入语句有关，但是控制台不会告诉我找不到ReactRouter.hashHistory吗？

我知道这个教程已经过去一年了，可能对API进行了一些更改，我只是不知道而已，这就是我的问题所在。非常感谢您的帮助！

0

2 答案

0 Comments

React Router failed prop 'history', is undefined这个问题出现的原因是使用了错误的版本的React Router。在React Router v4中，history的引入方式发生了变化，需要使用新的方式来创建history对象。

解决方法是使用正确的版本的React Router，或者按照新的引入方式来创建history对象。

具体操作如下：

1. 首先，确认自己使用的React Router版本。可以通过查看package.json文件或者运行npm list react-router命令来获取版本信息。

2. 如果使用的是React Router v4，则需要按照新的方式来创建history对象。在v4中，可以使用react-router-dom库中的BrowserRouter组件来自动创建history对象，示例如下：

import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

3. 如果使用的是React Router v3，则需要使用对应版本的createBrowserHistory方法来创建history对象。示例如下：

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

通过使用正确的React Router版本，并按照新的引入方式来创建history对象，可以解决React Router failed prop 'history', is undefined这个问题。

0
0 Comments

问题的原因是在React Router v4中，Router组件只能有一个子元素，而在给定的代码中，没有使用任何子元素。因此，出现了"Uncaught Error: A may have only one child element"错误。

解决方法是在Router组件中添加一个子元素，例如使用Switch组件将多个Route组件包裹起来。

以下是修复后的代码示例：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './components/App';
render(
  
    
      
      {/* 添加其他路由 */}
    
  ,
  document.getElementById('root')
);

这样就解决了"Uncaught Error: A may have only one child element"错误。

0