React-Router @ 4：経路が[email protected]で正常に切り替わらない

Question

React-Router@4ととWebpack@2^のリアクションアプリケーションを構築しています。私は私のMain.jsファイルは次のようになります

/* global __DEV__ */ 
import React from 'react'; 
import { Switch, Route, Link } from 'react-router-dom'; 

// import asyncRoute from './asyncRoute'; 
// const Welcome = asyncRoute(() => import('../views/Welcome')); 
// const About = asyncRoute(() => import('../views/About')); 
// const Topics = asyncRoute(() => import('../views/Topics')); 

import Welcome from '../views/Welcome'; 
import About from '../views/About'; 
import Topics from '../views/Topics'; 

const Routes = ({ ...properties }) => { 
    return (
    <div> 
     <div> 
     Dummy Links to check Code Splitting 
     <ul> 
     <li><Link to="/">Welcome</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 
     </div> 
     <Switch> 
     <Route exact path="/" component={Welcome} /> 
     <Route path="/about" render={(props) => <h3>About</h3>} /> 
     <Route path="/topics" component={Topics} /> 
     </Switch> 
    </div> 
); 
} 

export default Routes; 

// This will enable/force Hot Module replacement on __DEV__ environment. 
// if (__DEV__) { 
// require('../views/Welcome'); 
// require('../views/About'); 
// require('../views/Topics'); 
// } 

このようroutes.jsファイルで宣言されたルートを持っている、

が起こっ

奇妙なことは、

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 

import configureStore from './redux/configureStore'; 

const initialState = window.__INITIAL_STATE__; 
const store = configureStore(initialState); 

import './styles/main.css'; 

import Root from './views/Root'; 

function render(Root) { 
    ReactDOM.render(
    <AppContainer> 
     <Root store={ store } /> 
    </AppContainer>, 
    document.getElementById('root') 
); 
} 

if (module.hot) { 
    module.hot.accept('./views/Root',() => { 
    const nextRoot = require('./views/Root').default; 
    render(nextRoot); 
    }); 
} 

render(Root); 

ノーマルルートの切り替えは、あなたに起こっていません以下の添付ビデオを見ることができます

ビデオからhttps://share.viewedit.com/XbjKCUjbcvhcL3xRXm8kX7

、それは通常、再レンダリングが起きていないされていませんが、私はいくつかのコンポーネントで何かを変更すると、反応するホットローダーのパッチは一度に切り替えるパスが起こっているリンクをクリックするようになります。レンダリングされる。

私のプロジェクトは、私は、この問題を解決することができますどのようにこのパスhttps://github.com/bboysathish/react-boilerplate/tree/dev

にありますか？

Answer 1

実際には、コンテキストの伝播をブロックすることが判明しています。

あなたにそれを期待のようなアプリケーションの仕事を持って、次の差分を実行してください。それに

diff --git a/app/routes/Routes.js b/app/routes/Routes.js 
index 2b9b787..45dbcbf 100644 
--- a/app/routes/Routes.js 
+++ b/app/routes/Routes.js 
@@ -22,7 +22,7 @@ const Routes = ({ ...properties }) => { 
      <li><Link to="/topics">Topics</Link></li> 
     </ul> 
     </div> 
-  <Route path="/" component={Welcome} /> 
+  <Route path="/" exact component={Welcome} /> 
     <Route path="/about" component={About} /> 
     <Route path="/topics" component={Topics} /> 
    </div> 
diff --git a/app/views/App.js b/app/views/App.js 
index 405414c..c712c3a 100644 
--- a/app/views/App.js 
+++ b/app/views/App.js 
@@ -1,5 +1,6 @@ 
import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
+import { withRouter } from "react-router-dom"; 

class App extends Component { 
    render() { 
@@ -12,4 +13,4 @@ class App extends Component { 
    } 
} 

-export default connect()(App); 
+export default withRouter(connect()(App)); 

レッツ・ダイビングビット：

-export default connect()(App); 
+export default withRouter(connect()(App)); 

これはあなたの連結成分が応答していることを確認します文脈の変更React-reduxは、コンテキストの変更時にコンポーネントを再レンダリングしません。これは既知の問題です。

-  <Route path="/" component={Welcome} /> 
+  <Route path="/" exact component={Welcome} /> 

これはあなたのWelcomeコンポーネントのみが、正確な/ URLにレンダリングされていることを確認します。