React Router V4はURLを更新していますが、リフレッシュしていません（React、Redux）

Question

React-Router V4を使用してアプリケーションにルートを追加しようとしていますが、動作しません。基本的には、ブラウザのURLを更新していて、実際のアプリ内では何も変更しないで、history.pushという経路をプログラム的に変更しようとしています。

注：私はreduxを使用しています。この問題に関する

だけ答えた質問は次のとおりです。ただし

React history.push() is updating url but not navigating to it in browser

、私は上記の質問への答えを試みた、それは私のために動作しません。ここ

は重要スニペットである：

最上位ファイル（index.js）経路

... 
 
export default function ContentRouter() { 
 
    return <div className="content"> 
 
     <Route exact path="/dashboard" component={TmpDashboard}/> 
 
     <Route exact path="/" component={() => { 
 
      return <h1>Home</h1> 
 
     }}/> 
 
    </div> 
 
}

01を含む

... 
 
ReactDOM.render(
 
    <BrowserRouter> 
 
     <Provider store={store}> 
 
      <App/> 
 
     </Provider> 
 
    </BrowserRouter> 
 
    , document.getElementById('root')); 
 
...

コンポーネント

コンポーネント押す経路

... 
 
this.handleGroupClick = (group) => { 
 
    this.props.history.push(`/groups/${group}`); 
 
    this.props.onOpenChange(false); 
 
}; 
 
... 
 
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

Answer 1

完全に間違った場所で多くの検索を行った後、何が間違っているかを把握しました。更新の不足はReduxによって引き起こされました！

コンポーネントがconnectでラップされると、ファンキーなものが発生し、ビューは更新されません。

溶液がここで言及されています。私は暇な方法：

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

基本的には、その内部にRouteやリアクト・ルーターもので、すべてのコンポーネントがwithRouter

EDITでラップする必要がありますカップリングの増加は経路を扱うためのコンポーネントを持つことでした。そうすれば、私はそのコンポーネントとルータを持つコンポーネントをラップするだけです。

Answer 2

あなたが反応し、ルータV4をリダイレクトするためのリダイレクトコンポーネント+状態を使用することができます。

主なアプリケーション：

class FooPage extends React.Component{ 
    render(){ 
     return(
      <MyChild history={this.props.history} /> 
     ); 
    } 
} 

：

class App extends React.Component { 

    render() { 
     return (
      <BrowserRouter> 
       <div> 
        /* this is a common component and happens to need to do redirect */ 
        <Route component={CommonComponentThatPushesToHistory} /> 
        <div id="body"> 
         /* I usually place this switch in a separate Routes file */ 
         <Switch> 
          <Route exact path="FooRoute" component={FooPage}/> 
          <Route exact path="BarRoute" component={BarPage}/> 
         </Switch> 
        </div> 
        /* another common component which does not push to history */ 
        <Footer /> 
       </div> 
      </BrowserRouter> 
     ); 
    } 
} 

export default withRouter(App); 

CommonComponentThatPushesToHistory

class CommonComponentThatPushesToHistory extends React.Component{ 
    render(){ 
     return(
      <button type="button" onClick={() => {this.props.history.push('some-page');}}>Click to get redirected</button> 
     ); 
    } 
} 

FooPageを歴史にプッシュ子コンポーネントを有することができる。ここ

Answer 3

作品セットアップです0

MyChildコンポーネントは、CommonComponentThatPushesToHistoryと同じ方法で履歴にプッシュできます。