プロップの「履歴」は「ルーター」で必須としてマークされていますが、その値は「未定義」です。ルーター内

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が失敗したプロップ「履歴」、未定義

値が定義されていない場合、履歴を解決する必要があるとマークするにはどうすればよいですか？

React-Routerをアップグレードし、hashHistoryをbrowserHistoryに置き換える

そしてウェブの周りの多くの検索、しかし私はこの問題を修正することができませんでした。React Routerはバージョン4です

react-router v4を使用している場合は、react-router-domもインストールする必要があります。その後、react-router-domからBrowserRouterをインポートし、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のインスタンスの受け渡しに変更されました。新しいドキュメントのコード例をご覧ください。

これは、自動的にアップグレードする多くの人々を魅了してきました。移行ドキュメントは「いつでも」公開されます。

これを一番上に追加したい：

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を参照してください

ログインの練習も書いています。そして、あなたのような同じ質問にも答えてください。1日の苦労の末、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')
)