“历史logging”在“路由器”中被标记为需要，但其值为“未定义”。 在路由器

我是ReactJs的新手。 这是我的代码：

var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); 

并用webpack编译。 此外，我添加了主要组件到我的别名。 控制台会引发这些错误： 我也读了这些链接：

反应路由器失败的道具'历史'，是未定义的

当值未定义时，如何解决历史logging被标记为必需的？

升级React-Router并用browserHistoryreplacehashHistory

并在网上search很多，但我无法解决这个问题。 React路由器是版本4

Answer 1

如果您使用react-router v4，则还需要安装react-router-dom。 之后，从react-router-dom导入BrowseRouter，并将Router切换到BrowseRouter。 看来，v4改变了几件事情。 此外，反应路由器文档已过时。 这是我的工作代码：

 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route } from 'react-router-dom' import App from './components/App'; ReactDOM.render(( <BrowserRouter> <Route path="/" component={App}/> </BrowserRouter> ), document.getElementById('root') ); 

资源

Answer 2

您使用的是哪个版本的React路由器？ 路由器版本4从传递browserHistory类更改为传递browserHistory的一个实例，请参阅新文档中的代码示例 。

这已经吸引了很多自动升级的人， 移民文件将在“现在的任何一天”出现。

你想把它添加到顶部：

 import createBrowserHistory from 'history/createBrowserHistory' const newHistory = createBrowserHistory(); 

和

 <Router history={newHistory}/> 

Answer 3

我在ES6中遇到了同样的问题，但是当我切换到“react-router-dom”库时，问题就解决了。 对于ES6的所有粉丝，我们来看看：

npm install –save react-router-dom

在index.js中：

 import {HashRouter, Route} from 'react-router-dom'; import App from './App'; ReactDOM.render( <HashRouter> <Route path="/" component={App}/> </HashRouter> , document.getElementById('root') ); 

Answer 4

我也写了一个login练习。 而且也遇到像你一样的问题。 经过一天的努力，我发现只有this.props.history.push('/list/')才能做到这一点，而不是拉入大量的插件。 顺便说一下， react-router-dom版本是^4.2.2 。 谢谢！

 handleSubmit(e){ e.preventDefault(); this.props.form.validateFieldsAndScroll((err,values)=>{ if(!err){ this.setState({ visible:false }); this.props.form.resetFields(); console.log(values.username); const path = '/list/'; this.props.history.push(path); } }) } 

Answer 5

如果你想有多条路线，你可以使用这样的开关，

 import {Switch} from 'react-router'; 

然后

 <BrowserRouter> <Switch> <Route exact path="/" component={TodoComponent} /> <Route path="/about" component={About} /> </Switch> </BrowserRouter>