web-dev-qa-db-ja.com

react-router v4-browserHistoryは未定義です

私は電子で私の最初の反応アプリを作成しています（私の最初の電子アプリも）。 2つのルートがあり、一方から他方へ移動する必要があります。そのために私は次のコードを使用しています：

ルート

ReactDOM.render(
  <Router history={browserHistory}>
      <App />
  </Router>,
  document.getElementById('root')
);

アプリ

class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div className="app-master">
                <Switch>
                    <Route path='/city' component={CityList}/>
                    <Route path='/' component={SplashScreen}/>
                </Switch>
            </div>
        )
    }
}

ページ

import { browserHistory } from 'react-router';
...
browserHistory.Push('/city');

この行はエラーになりますが、

TypeError: Cannot read property 'Push' of undefined

可能な解決策をウェブで検索しましたが、見つかりません！ SOも同様の質問がたくさんありますが、私にとってはうまくいきませんでした:(

javascriptreactjsreact-routerelectron
16
demonofthemist

これを history モジュールからインポートする必要があります。このモジュールは、異なる履歴を作成する3つの異なる方法を提供します。

  • createBrowserHistoryは、 history API をサポートする最新のWebブラウザーで使用するためのものです
  • createMemoryHistoryは参照実装として使用され、React Nativeまたはテストのような非DOM環境でも使用できます
  • レガシーWebブラウザのcreateHashHistory

電子環境ではブラウザの履歴を使用できません。ハッシュまたはメモリの履歴は使用できます。

import { createHashHistory } from 'history'

const history = createHashHistory()

その後、小道具に挿入されたhistoryを使用できます

this.props.history.Push('/')
26
Balthazar

コンポーネントではreact-routerパッケージから利用できなくなったbrowserHistoryをまだ使用しているため、これは機能しません。 historyパッケージの履歴を使用するように変更する必要があります

簡単にするために、次の内容のhistory.jsファイルを作成できます

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

Root

import history from '/path/to/history';

ReactDOM.render(
  <Router history={history}>
      <App />
  </Router>,
  document.getElementById('root')
);

ページ

import history from 'path/to/history';
...
history.Push('/city');
3
Shubham Khatri

上記の便利なポインター。私が見つけた最も簡単な解決策は、追加することです：

import {createBrowserHistory} from 'history';

importステートメントのリストに追加してから、次を追加します。

const browserHistory = createBrowserHistory();

完璧に動作しないかもしれませんが、私が取り組んでいる基本的なもののためにトリックを行うようです。お役に立てば幸いです。

2
Sam Michel

React-router v4では、定数構成としてルーターを初期化し、子コンポーネントのthis.propsを介して履歴にアクセスします。

依存関係をインポートする

import { Route, Router } from "react-router";
import { createBrowserHistory } from "history";

ルーター設定を定義し、propとして履歴を追加します

const history = createBrowserHistory();
const routes = (
  <Router history={history}>
    <Route path='/city' component={CityList}/>
    <Route path='/' component={SplashScreen}/>
  </Router> )

class App extends Component {
  render() {
    return ( 
    <div className = "app-master> 
      {routes} 
    </div>)
}

ルートを定数およびout of renderメソッドとして定義すると、ルート構成が一度だけ初期化されます。

ページコンポーネント

class Page extend Component {
  render() {
    this.props.history.Push('/');
  }
}

履歴は、routes configで定義されたすべての子コンポーネントの小道具として利用できます。

0
Shashank K

import { browserHistory } from 'react-router'は、Reactルーター4では機能しません。 リンク

リダイレクトコンポーネントを使用します。

import { Redirect } from 'react-router';
<Redirect Push to="/somewhere/else"/>

レンダリング関数は、コンテンツ全体をリダイレクトコンポーネントに置き換える必要があります。

0
vijayst