React history.push（）はURLを更新していますが、ブラウザーでそれをナビゲートしていません

Question

この時点では、react-router v4とnpmの履歴ライブラリについて多くのことを読んだことがありますが、

history.push（）メソッドを使用してURLを変更すると、コードをナビゲートして簡単なリダイレクトを行うまで、コードが期待通りに機能しています。 URLは指定されたルートに変更されていますが、ボタンプッシュのリダイレクトは行いません。おかげさまで、まだ反応ルータを学んでいます。

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

Answer 1

チェックあなたが入れ子になっていない場合はBrowserRouterタグを。

私はreact-router v4でこの問題を抱えていましたが、アプリケーションを変更してBrowserRouterを下の例のように一番上に置くだけで解決しました。

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

Answer 2

私は同じ問題があります。

は、いくつかの検索の後、私はこのreact-router issue

を発見した私は現在反応し、ルータをV3にダウングレードしていると私はreact-routerパッケージとそれの仕事の罰金からbrowserHistoryを使用しています。

Answer 3

v3にダウングレードする必要はありません.React-Router 4.0.0は、OPが求めるものを完全に達成することができます。あなたは私はあなたが使用していたと仮定するものである代わりに<BrowserRouter>の反応ルータ、とそれを同期するために<Router>を使用する必要がありますので

const history = createBrowserHistory(); 

は、カスタム履歴オブジェクトです。

代わりにこれを試してみてください：カスタム履歴オブジェクトは、ルータの歴史小道具を経由して渡されると

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

Answer 4

女性と紳士。ルータV4の場合。これは私のために働いたものです。 @ティナの答えは私のために働かなかった。この次のステップを追加する作業それを得るために

History.js 
import createHistory from 'history/createBrowserHistory'; 

export default createHistory({ 
basename: '/' //This is very important! Set your basename for the history 
class to track 

}）

次に、

ActionClass.js 

import History from History.js 

function doSomething(blah){ 
return dispatch => { 
    //Make your service calls 
    //process response 
    // 
    History.push(//path you want the user to be navigated to. Note all this does is add the url path in the address bar) 
    History.go (//this should force the browser to actually get going) 
}