道具“历史”在“路由器”中被标记为需要，但它的价值在“路由器”中是“未定义的”

我是 ReactJ 的新成员，这是我的代码:

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 并用 BrowserHistory 替换 hashHistory

和许多网络搜索，但我无法修复这个问题。反应路由器是版本4

83938 次浏览
小开

Which version of React Router are you using? Router version 4 changed from passing in the browserHistory class to passing an instance of browserHistory, see the code example in the new docs.

This has been catching lots people who automatically upgrade; a migration document will be out 'any day now'.

You want to add this to the top:

import { createBrowserHistory } from 'history'


const newHistory = createBrowserHistory();

and

<Router history={newHistory}/>
小开
最佳答案

If you are using react-router v4 you need to install react-router-dom as well. After that, import BrowserRouter from react-router-dom and switch Router for BrowserRouter. It seems that v4 change several things. Also, the react-router documentation is outdated. This is my working code:

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

Source

小开

I got the same problem in ES6, but when I switched to use 'react-router-dom' library, the problem was solved. For all fans of ES6, here we go:

npm install --save react-router-dom

In index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';


ReactDOM.render(
<HashRouter>
<Route path="/" component={App}/>
</HashRouter>
,
document.getElementById('root')
);
小开

I also write a Login practice. And also meet the same question like you. After a day struggle, I found that only this.props.history.push('/list/') can make it instead of pulling in a lot of plugins. By the way, the react-router-dom version is ^4.2.2. Thanks!

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

小开

If you want to have multiple routes you can use switch like this,

import {Switch} from 'react-router';

then 

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

Version 4 of React Router changed several things. They made separate top level router elements for the different history types. If you're using version 4 you should be able to replace <Router history={hashHistory}> with <HashRouter> or <BrowserRouter>.
For more detail, see https://reacttraining.com/react-router/web/guides

小开

The below works for me with "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')
)
小开

For (year 2022) version "react-router-dom": "^6.3.0" if anyone is still facing this issue check the order of import in App.js file.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

I don't know why the order matters but it worked for me.

Also this might help: Attempted import error: 'Switch' is not exported from 'react-router-dom'


提交答案