react-redux v5でのReact v15.5の設定が

Question

の場合、経路がナビゲートされていません。私はReactで新しく、ReactプロジェクトにはFacebookのが設定されています。ここでコアファイルは、以下のとおりです。

Index.js

import React from 'react'; 
import ReactDOM, { render } from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import createHistory from 'history/createBrowserHistory'; 

import { createStore, applyMiddleware } from "redux"; 
import { Provider } from 'react-redux' 
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'; 
import thunk from 'redux-thunk'; 
import reducers from './reducers'; 

import App from './containers/App'; 
import Routes from "./Routes"; 

const browserHistory = createHistory(); 
middleware = routerMiddleware(browserHistory); 
const store = createStore(reducers, applyMiddleware(middleware, thunk)) 
const history = syncHistoryWithStore(browserHistory, store); 

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

Routes.js

import React, { Component } from 'react'; 
import { Route, Switch } from 'react-router'; 

import Home from './containers/Home'; 
import About from './containers/About'; 
import Contact from './containers/Contact'; 

class Routes extends Component { 
    render() { 
    return (
     <Switch> 
     <Route exact path="/" component={ Home } /> 
      <Route path="/about" component={ About } /> 
      <Route path="/contact" component={ Contact } /> 
     </Switch> 
    ); 
    } 
} 

export default Routes; 

App.js

import React, { Component } from "react"; 
import { Link } from 'react-router-dom'; 
import Routes from "../Routes"; 
import SideNav from '../presentation/SideNav'; 

class App extends Component { 
    render() { 
     return (
      <div> 
       <Link to='/'>Home</Link> 
       <Link to='/about'>about</Link> 
       <Link to='/contact'>contact</Link> 
       <SideNav /> 
       <Routes /> 
      </div> 
     ); 
    } 
} 

export default App; 

P私がここで直面している問題は、特定のルートを持つページを読み込んでいるときに、そのコンポーネントがブラウザでレンダリングされていることです。 は、しかし、私は「リンク」を使用して別のルートに移動していた場合、その場合には

<Link to='/contact'>contact</Link> 

を言う、/接触コンポーネントがロードされていませんが、ルートが変化すると、ブラウザに反映されます。 react-router-reduxでも、 ConnectedRouterが含まれていますが、これは更新パッケージに含まれていません。

私はコードまたは欠落しているもので、いくつかの愚かな間違いを行っている場合、私は知りません。

ありがとうございます。 :)

Answer 1

ソリューションは、ルータとReduxのは、一緒にうまく動作反応して、一般的にhere

import { withRouter } from 'react-router-dom' 

// before 
export default connect(mapStateToProps)(Something) 

// after 
import { withRouter } from 'react-router-dom' 
export default withRouter(connect(mapStateToProps)(Something)) 

です。しかし、アプリケーションが、場所が変更されたときに更新されないコンポーネント（子ルートまたはアクティブなナビゲーションリンクが更新されない）を持つことがあります。

場合に発生：コンポーネントが接続（）（COMP）を介してReduxのに接続されている

• 。

問題はReduxのはshouldComponentUpdateを実装し、それから小道具を受信して​​いない場合は何も変更されているという兆候はありませんということです：

コンポーネントは、それがそうのようにレンダリングされていないという意味、「ルート要素」ではありませんルータ。これは修正するのが簡単です。コンポーネントを接続した場所を見つけ、withRouterでラップします。