阵营路由器类型错误:_this.props.history未定义
我使用的反应,路由器反应js和跟随他们的文档,但面对这个错误阵营路由器类型错误:_this.props.history未定义
在编译它显示的错误我,
TypeError: _this.props.history is undefined
这是我的index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={App}>
</Route>
</Router>
,
document.getElementById('root')
);
,这是我App.js文件
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
headerText: "Props from Header.",
contentText: "Props from content."
};
}
render() {
return (
<div className="App">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</div>
);
}
}
export default App;
你在使用npm吗?我在package.json中遇到了与“react-router”相同的问题:“^ 4.0.0”。将其更改为“react-router”:“^ 3.0.2”解决了我的问题。
“react-router”:“^ 3.0.2”适合我。但不明白为什么4.0.0不起作用。 –
我也是)我只是将它与我上次工作的package.json进行比较。 –
当您按照官方教程,第1课不起作用时,这不是一个好的标志:> – user798719
这是因为从4.0.0开始,React Router中的内容发生了变化。当您使用browserHistory
时,您现在应该使用来自react-router-dom
包的BrowserRouter
。因此,您的代码将如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter, Route } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<Route path="/" component={ App }/>
</BrowserRouter>, document.getElementById('root')
);
当然,您需要先安装react-router-dom
。
另请注意,如果您使用多个Route
元素,则必须使用Switch
,如in this answer所述。
以下解决方案适用于我ReactDOM.render:
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} />
<Route path="/user" component={User} />
<Route path="*" component={page404} />
</Switch>
</BrowserRouter>
它使用多路由。
你从哪里叫它? – Shota
我在index.js文件中使用了路由器,你可以从代码中看到这个。 –