支持`history`在`Router`中被标记为必需，但它的值是'undefined`。在路由器

Question

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

React Router failed prop 'history', is undefined

How do I resolve history is marked required, when value is undefined?

Upgrading React-Router and replacing hashHistory with browserHistory

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

Answer 1

如果您使用的是react-router v4，则还需要安装react-router-dom。之后，从react-router-dom导入BrowserRouter并切换Router for 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')
);

Source

Answer 2

您使用的是哪个版本的React Router？路由器版本4从传递browserHistory类更改为传递browserHistory实例，请参阅code example in the new docs。

这已经吸引了许多自动升级的人;迁移文件将“现在任何一天”出来。

您想将此添加到顶部：

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

和

<Router history={newHistory}/>

Answer 3

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

import {Switch} from 'react-router'; 

然后

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

Answer 4

我在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 5

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

Answer 6

我也写了一个登录练习。并且也像你一样遇到同样的问题。经过一天的挣扎，我发现只有this.props.history.push('/list/')可以制作而不是插入很多插件。顺便说一句，react-router-dom版本为^4.2.2。谢谢！

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

以下内容适用于“ 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')
)