web-dev-qa-db-ja.com

React history.Push（）はURLを更新していますが、ブラウザーでURLに移動していません

ここまで、react-router v4とnpm履歴ライブラリについて多くのことを読みましたが、私を助けてくれるものはないようです。

私のコードは、history.Push（）メソッドを使用してURLが変更されたときにナビゲートし、単純なリダイレクトを実行する時点まで期待どおりに機能しています。 URL ISは指定されたルートに変更されますが、ボタンプッシュでリダイレクトを行いません。事前に感謝しますが、まだ反応ルーターを学習しています...

[プッシュ]ボタンで{forceRefresh：true}を使用せずに単純なリダイレクトを行い、ページ全体をリロードするようにします。

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.Push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}
history.jsreact-router-v4
34
John

BrowserRouterタグがネストされていないか確認してください。

React-router v4でこの問題が発生しましたが、下の例のように最上位のBrowserRouterのみを持つようにアプリを変更した後、解決しました。

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
16
Artur Carvalho

V3にダウングレードする必要はありません。React-Router4.0.0はOPが要求するものを完全に達成できます。

const history = createBrowserHistory();

はカスタム履歴オブジェクトであるため、<Router>ではなく<BrowserRouter>を使用して、react-routerと同期する必要があります。

代わりにこれを試してください：

import React, {Component} from 'react';
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

カスタム履歴オブジェクトがルーターの履歴プロップを介して渡されると、history.Pushはアプリのどこでも期待どおりに動作するはずです。 （履歴オブジェクトを履歴構成ファイルに入れ、プログラムでルーティングする場所にインポートすることもできます）。

詳細については、以下を参照してください： React Router history object

38
Tina Chen

これをレンダリングすると、ルートの変更時に更新されます

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

反応ルーターdom：4.2.2

4
bathi d

私は同じ問題を抱えています。

いくつかの検索の後、私はこれを見つけました react-router issue

現在、react-routerをv3にダウングレードしており、react-routerパッケージのbrowserHistoryを使用していますが、問題なく動作します。

0
ndufreche