2014-09-27 43 views
1

我升级到react-router的最新版本0.7.0,无法正常工作。我不确定它是否是我的Require语句,我从其中一个路由器示例复制它们。无法获取最新的反应路由器工作

我使用: watchify --debug -t reactify ./app.jsx -o ./build/app-brow.j

代码下面认定通过NPM模块反应的时候我除去反应路由器代码:

我在本地有这些NPM模块。 watchify在全球范围内安装:

npm install react-router 
npm install reactify 
npm install react 

app.jsx

/** @jsx React.DOM */ 

var React = require('react'); 

// React Router 
var Router = require('react-router'); 
var Route = Router.Route; 
var Routes = Router.Routes; 
var Link = Router.Link; 


var MyAboutView = React.createClass({ 
    render: function() { 
    return (
     <div > 
     My About 
     </div> 
    ); 
    } 
}); 


var App = React.createClass({ 
    render: function() { 
     return (
     <div> 
      Main App 

      <this.props.activeRouteHandler/> 
     </div> 
    ); 
    } 
}); 


React.renderComponent((
    <Routes> 

    <Route path="/" handler={App}> 
     <Route name="about" handler={myAboutView} /> 
    </Route> 

    </Routes> 
), document.body); 

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test Router</title 

    </head> 

    <body> 
    Error, React/JS not loading. 

    <script type="text/javascript" src="build/app-brow.js"></script> 

    </body> 
</html> 
+0

错误信息说什么? – Rygu 2014-09-27 23:49:00

+0

浏览器控制台错误显示:'未捕获的ReferenceError:myAboutView未定义。' – 2014-09-28 03:24:00

回答

2

傻我来说,这是一个错字handler={myAboutView}应该handler={MyAboutView},请注意MyAboutView盖。

+1

我在编辑器中使用ESLint来捕获这些错别字。 – Guy 2015-10-23 04:54:58