1

首先，我正在使用：

  • “反应路由器”：“3.0.2”，
  • 浏览器同步": "2.18.8",
  • "url-loader": "0.5.7",
  • "webpack": "1.13.1",
  • "webpack-dev-middleware": "1.6.1",
  • "webpack-hot-middleware": "2.12.2",
  • “材料-ui”：“0.17.0”，

好的，现在 Webpack HMR 仅在我编辑作为主路由一部分的 reactjs 组件时才起作用，我的意思是：myurlapp.com/

但是如果一个组件是另一个路由的一部分，例如：myurlapp.com/form然后整个应用程序被重新加载。这是为什么？

我的根 js 是这样的：

    import React from 'react';
    import { render } from 'react-dom';
    import { Router, browserHistory } from 'react-router';
    import routes from './routes';
    import injectTapEventPlugin from 'react-tap-event-plugin';
    require('./favicon.ico');
    import './styles.scss';
    import 'font-awesome/css/font-awesome.css';
    import 'flexboxgrid/css/flexboxgrid.css';

    injectTapEventPlugin();

    render(
        <Router routes={routes} history={browserHistory} />, document.getElementById('app')
    );

routes.js 是这样的：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import NotFoundPage from './containers/NotFoundPage.js';
import LoginPage from './containers/LoginPage';
import FormPage from './containers/FormPage';
import TablePage from './containers/TablePage';
import Dashboard from './containers/DashboardPage';

export default (
  <Route>
    <Route path="login" component={LoginPage}/>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard}/>
      <Route path="dashboard" component={Dashboard}/>
      <Route path="form" component={FormPage}/>
      <Route path="table" component={TablePage}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Route>
);

顺便说一下，这是 webpack 的条目：

entry: [
  './src/webpack-public-path',
  'webpack-hot-middleware/client?reload=true',
  './src/index'
],

我应该显示什么其他代码？这就是我在 Chrome 开发工具控制台中看到的内容： 开发工具中的 HMR 如您所见，我编辑了 Header.js 的代码，并且更新正常（无需重新加载整个应用程序），但如果我编辑另一个组件，则为独占对于不同于主路由器的路由器/然后重新加载整个应用程序。

4

0 回答 0