带有 react-router 和 webpack 的基本 hello world 无法正常工作答案

【问题标题】：Basic hello world with react-router and webpack not working带有 react-router 和 webpack 的基本 hello world 无法正常工作
【发布时间】：2016-05-15 16:43:24
【问题描述】：

我有一个非常简单的 Webpack 配置（使用 react-slingshot https://github.com/coryhouse/react-slingshot）和一个带有 react-router 的基本 hello world。
我在应用程序 div 中得到了一个 noscript 标签，而不是渲染 hello world。

这是我在 package.json 中的一些依赖项：

"react": "0.14.6",
"react-dom": "0.14.6",
"react-redux": "4.0.0",
"history": "2.0.0",
"react-router": "2.0.0-rc5",

这是我的 index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Routing test</title>
  </head>
<body>
  <div id="app"></div>
    <script src="js/bundle.js"></script>
</body>
</html>

这是我的 index.js：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const RootComponent = () => <div>Hullo World?</div>;

render(
  <Router history={browserHistory}>
    <Route path="/" Component={RootComponent} />
  </Router>
  , document.getElementById('app')
);

这是 DOM 中元素的快照：

<html lang="en"><head>
    <title>Routing test</title>
  </head>
<body>
    <div id="app"><noscript data-reactid=".0"></noscript></div>
    <script src="js/bundle.js"></script>
</body></html>

如果我删除路由，应用程序可以正常工作。为什么我得到一个 noscript 标签而不是预期的 Hello World div？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

组件属性应为小写

render(
   <Router history={browserHistory}>
     <Route path="/" component={RootComponent} />
   </Router>
   , document.getElementById('app')
);

【讨论】：