反应路由器 Webpack HMR。根路由必须渲染单个元素答案

【问题标题】：React-router Webpack HMR. The root route must render a single element反应路由器 Webpack HMR。根路由必须渲染单个元素
【发布时间】：2017-07-16 00:52:14
【问题描述】：

我试图弄清楚当 HMR 启用并遇到以下错误时，react-router 在 AppContainer 中的工作方式。你能解释一下黑客是怎么回事吗？

Invariant Violation：根路由必须渲染单个元素

Index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR

import Routes from './routes/index';
const MOUNT_APP = document.getElementById('root');

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Routes />
    </AppContainer>,
    MOUNT_APP
  );
};

render();

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./routes/index', () => {
    render()
  });
}

路由文件为：

import React from 'react';
import { Router, IndexRoute, browserHistory } from 'react-router';

import Home from './Home';
import SubView from './Sub';

const componentRoutes = {
  component   : Home,
  path        : '/',
  indexRoute  : SubView,
  childRoutes : [

  ]
}

const Routes = () => {
  return (
    <Router history={browserHistory} routes={componentRoutes} />
  );
};

export default Routes;

HomeView 组件：

import React from 'react';

const HomeView = () => {
    <div>
      <h4>Welcome</h4>
    </div>
}

export default HomeView;

首页查看路线：

import HomeView from './components/SubView';

export default {
  component: HomeView
}

P.S：SubView 等于 HomeView。

【问题讨论】：

标签： javascript reactjs webpack react-router webpack-hmr

【解决方案1】：

您的HomeView 组件不返回任何内容。您需要将内部 jsx 包装在 return ( ... ) 中。

【讨论】：

感谢您的建议。我做了，但错误仍然存在。

【解决方案2】：

您需要从组件中返回一个元素。现在，HomeView 的组件如下所示：

const HomeView = () => {
    <div>
      <h4>Welcome</h4>
    </div>
}

你需要返回标记，而不是像这样把它放在函数体中：

const HomeView = () => {
    return (
         <div>
             <h4>Welcome</h4>
         </div>
    )
}

【讨论】：

@Hum4no1d 谢谢，我确实尝试将两个组件包装到 return 语句中，但错误仍然相同。