Question

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

以下是来自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？

Answer 1

Component属性应为小写

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

react-router和webpack无法正常工作的基本问候世界

1 个答案: