我正在使用React-Router@4
和React-Hot-Loader@3.beta.6
和Webpack@2^
。
发生的奇怪事情正在发生,
我在 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/reaect-boilerplate/tree/dev
如何解决此问题?
实际上是阻止上下文传播的。
请执行以下差异,以使您的申请工作如您期望的那样:
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上渲染。