React-Router @ 4：路由与[email protected]无法正常切换

Question

我正在构建一个React应用程序，其中[email protected]和[email protected]和[email protected]^。

奇怪的事情发生了，

我已经在routes.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'); 
// } 

我Main.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像你期望它让你的应用程序的工作：

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。