遺漏的類型錯誤：無法讀取未定義

Question

我收到此錯誤的特性「createRouteFromReactElement」： -
遺漏的類型錯誤：在此代碼不能讀取的不確定
財產「createRouteFromReactElement」。我用路由器進行導航，但沒有工作。我導入一個名爲Home.jsx

var React = require('react') 
    var ReactDOM = require('react-dom') 
    var Router = require('react-router').Router 
    var Route= Router.Route 
    var IndexRoute = Router.IndexRoute 

    var App = React.createClass({ 
     render() { 
     return (
      <div> 
      <p>App</p> 
      <ul> 
       <li>About</li> 
      </ul> 
      </div> 
     ) 
     } 
    }) 

var About = require('./components/Home') 

ReactDOM.render((
    <Router> 
    <Route path="/" component={App}> 
     <IndexRoute path="/about" component={About} /> 
    </Route> 
    </Router> 
), document.body) 

和Home.jsx

文件

var React = require('react'); 
var RaisedButton = require('material-ui/lib/raised-button'); 

var Home = React.createClass({ 
    render:function() { 
    return (
     <RaisedButton label="Default" /> 
    ); 
    }, 
}); 

module.exports = Home; 

Answer 1

有你所做錯了一些事情。我假設你正在使用React Router 1.0（因爲使用了IndexRoute）。

在1.0版Router組件是頂層模塊的屬性，所以這是你會怎麼做你的進口：

var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var IndexRoute = ReactRouter.IndexRoute; 

我想你也不能完全理解什麼IndexRoute是，看看in the docs的澄清。但是tldr;是IndexRoute不採取路徑參數。

另一件事是將您的路由組件安裝在需要指定位置的地方，並且您可以使用{this.props.children}來完成。所以，你可能看起來是這樣：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var IndexRoute = ReactRouter.IndexRoute; 

var App = React.createClass({ 
    render() { 
    return (
     <div> 
     <p>App</p> 
     {this.props.children} 
     </div> 
    ) 
    } 
}) 

var About = require('./components/Home') 

ReactDOM.render((
    <Router> 
    <Route path="/" component={App}> 
     <IndexRoute component={About} /> 
    </Route> 
    </Router> 
), document.body) 

請看看在Introduction docs所以你會更好地瞭解如何使用您的應用程序反應路由器。