2016-02-05 38 views
0

我有一个非常简单的Webpack配置(使用react-slingshot https://github.com/coryhouse/react-slingshot)和基本的hello世界与react-router。
而不是呈现hello世界我得到应用程序div中的noscript标记。基本问候世界与反应路由器和webpack不工作

下面是一些的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?

回答

1

组件属性应该是小写

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