道具“历史”在“路由器”中被标记为必需，但是其值为“未定义”。在路由器中

我是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进行编译。我也将Main组件添加到了别名中。控制台抛出以下错误： 我也阅读了以下链接：

React Router失败的道具“历史记录”，未定义

未定义值时，如何解决历史记录标记为必需的问题？

升级React-Router并将hashHistory替换为browserHistory

和网络上的许多搜索，但我无法解决此问题。React Router是版本4

如果您使用的是react-router v4，则还需要安装react-router-dom。之后，从react-router-dom导入BrowserRouter并将Switch Router切换为BrowserRouter。v4似乎改变了几件事。而且，react-router文档已过时。这是我的工作代码：

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

资源

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

这吸引了很多自动升级的人。迁移文档将“现在每天”发布。

您要将其添加到顶部：

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

和

<Router history={newHistory}/>

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

import {Switch} from 'react-router'; 

然后

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

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

React Router的第4版更改了几件事。他们为不同的历史记录类型创建了单独的顶级路由器元素。如果您使用的是版本4，则应该可以<Router history={hashHistory}>用<HashRouter>或替换<BrowserRouter>。
有关更多详细信息，请参见https://reacttraining.com/react-router/web/guides

我还写了一个登录实践。也遇到像你一样的问题。经过一天的奋斗，我发现只能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);
        }
    })
}

下面为我​​使用“ react-router@^3.0.5”工作：

package.json：

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js：

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)