web-dev-qa-db-ja.com

支柱の `history`は` Router`の中で必須としてマークされていますが、その値は `undefined`です。ルーター内

私は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でそれをコンパイルします。また、エイリアスにメインコンポーネントを追加しました。コンソールはこれらのエラーを投げます： 私はまたこれらのリンクを読む：

React Routerはprop 'history'に失敗しました、未定義です

値が未定義の場合、どうやって履歴を解決する必要がありますか？

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

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

reactjsreact-router
76
Mammad2c

React-router v4を使用している場合は、react-router-domもインストールする必要があります。その後、react-router-domからBrowserRouterをインポートし、RouterR 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')
);

出典

140
betomoretti

どのバージョンのReact Routerを使っていますか？ルーターバージョン4はbrowserHistoryクラスの受け渡しからbrowserHistoryのインスタンスの受け渡しに変更されました。 新しいドキュメントのコード例 を参照してください。

これは自動的にアップグレードする多くの人々を惹きつけています。移行文書は「いつでも」公開されます。

これを一番上に追加します。

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

そして

<Router history={newHistory}/>
14
Charles Merriam

複数の経路を使いたい場合は、このようにswitchを使用できます。

import {Switch} from 'react-router';

それから

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

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')
);
3
Dimang Chou

React Routerのバージョン4ではいくつかの点が変更されました。彼らは異なる歴史タイプのために別々のトップレベルルータ要素を作りました。バージョン4を使用している場合は、<Router history={hashHistory}>を<HashRouter>または<BrowserRouter>に置き換えることができます。
詳細については、 https://reacttraining.com/react-router/web/guides を参照してください。

1
jack.lin

私はまたログイン練習を書く。また、あなたと同じ質問に答えます。一日の奮闘の後、私は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);
        }
    })
}
0
YangFang

以下は "react-router@^ 3.0.0"で私のために働きます：

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')
)
0
Pritam Manerao