リダンダントルータv4がReduxと連携していません

Question

リアクタルータv4を使用してリザルトアプリケーションを開発しています。私のアプリにReduxを導入するまでは、すべてうまくいきました。それ以来、リンクをクリックしてルートを変更すると、ブラウザのURLは変更されますが、ルートに対応するコンポーネントはロードされません。 Reduxコードをコメントアウトするとうまくいきます。これを引き起こす原因は何ですか？ルーティング用のコードは次のとおりです。

import React, { Component } from 'react'; 
import { Switch, Route, Link } from 'react-router-dom'; 
import LeftSubDefault from './../components/left-sub-default.component'; 
import LeftSubOne from './../components/left-sub-one.component'; 
import LeftSubTwo from './../components/left-sub-two.component'; 
import { withRouter } from 'react-router-dom'; 
import { connect } from "react-redux"; 
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js"; 

class LeftComponent extends Component { 
    render() { 
    return (
     <div className="col-xs-6"> 
      <p> 
      Current sub route: {this.props.currentRoute} 
      </p> 
      <ul> 
      <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li> 
      <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li> 
      <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li> 
      </ul> 
      <Switch> 
      <Route exact path='/' component={LeftSubDefault} /> 
      <Route exact path='/left-sub1' component={LeftSubOne} /> 
      <Route exact path='/left-sub2' component={LeftSubTwo} /> 
      </Switch> 
     </div> 
    ); 
    } 
} 
const mapStateToProps = (store) => { 
    return { 
    currentRoute: store.routes.currentRoute 
    }; 
} 
const mapDispatchToProps = (dispatch) => { 
    return { 
    goToDefault:() => { 
     dispatch(goToLeftDefault()) 
    }, 
    goToSub1:() => { 
     dispatch(goToLeftOne()) 
    }, 
    goToSub2:() => { 
     dispatch(goToLeftTwo()) 
    } 
    }; 
} 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeftComponent)); 

PS：コンソールでエラーは発生しません。コードは正常に動作し、コンポーネントはロードされません。 githubの同様のスレッドは4671です。私はさまざまなサイトで多くのスレッドを見てきましたが、どれもこの問題の解決策はありません。

Answer 1

ハア、今私は反応ルータとreduxとのプロジェクトを作っています=）。

reduxのインテグレーションhttps://reacttraining.com/react-router/web/guides/redux-integrationの公式ドキュメントをご覧ください。

私は主な点はwithRouterとconnectホックの順番だと思います。

問題は、ReduxがshouldComponentUpdateを実装していて、ルータからプロップを受信して​​いない場合に変更が加えられていることを示すものではありません。これは修正するのが簡単です。コンポーネントを接続した場所を見つけ、withRouterでラップします。

公式ドキュメントから。私が反応し、ルータのDOM V4.1.1を使用してい

UPD

import { withRouter } from 'react-router-dom'; 
import { connect } from 'react-redux'; 

class Home extends React.Component {...} 

export default withRouter(
    connect(mapStateToPropsFunc)(Home) 
); 

Answer 2

。それは私のために働いています。ここで

import React from 'react'; 

import Reducer1 from 'yourReducer1'; 
import Reducer2 from 'yourReducer2'; 


import { 
    Route, 
    Switch as RouterSwitch 
} from 'react-router-dom'; 

const App =()=> (
<RouterSwitch> 
    <Route path="/link1" exact component={Reducer1}/> 
    <Route path="/link2" exact component={Reducer2}/>  
</RouterSwitch> 
); 

export default App; 

が、あなたが