设置React-Router时出现故障

Question

所以我在设置react-router时遇到了很多麻烦。我查看了多个教程和指南，以及文档和我只是不能告诉最新错误，我真的很感激任何帮助。

这里是我的项目的链接在GitHub上，如果你想看看更多的代码，但我想大多数的反应路由器代码被注释掉有： https://github.com/ArashDai/simpleStore

edit im updating snippet here 

////my Render 
 

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

 

 
ReactDom.render(< Router Routes = { 
 
     Routes 
 
    } 
 
    /> ,document.getElementById('main')); 
 
       
 
////my Routes 
 
    var React = require('react'); 
 
    var Router = require('react-router').Router; 
 
    var Route = require('react-router').Route; 
 
    var IndexRoute = require('react-router').IndexRoute; 
 
    var Link = require('react-router').Link; 
 
    //var { Router, Route, IndexRoute, Link } = require('react-router'); 
 

 
    var Routes = (
 

 
     < Route path = '/' 
 
     component = { 
 
     require('./components/App') 
 
     } > 
 

 
     < IndexRoute component = { 
 
     require('./components/MainBody') 
 
     } 
 
     /> 
 
     
 
      
 
    </Route > 
 

 

 
    ) 
 

 
    module.exports = Routes; 
 

 

 
    //// my app 
 

 

 
    var React = require('react'); 
 

 
    var Router = require('react-router').Router; 
 
    var Route = require('react-router').Route; 
 
    var IndexRoute = require('react-router').IndexRoute; 
 
    var Link = require('react-router').Link; 
 
    var Header = require('./Header'); 
 
    var Footer = require('./Footer'); 
 

 

 
    var App = React.createClass({ 
 
      render: function() { 
 
       return (
 

 
        <div> 
 

 
        < Header/> 
 

 
        < div className = 'container-fluid' > { 
 
        this.props.children 
 
        } 
 

 
        < /div> 
 

 
      <Footer/ > 
 

 

 
        < /div> 
 
     
 
    ) 
 
    } 
 
}); 
 

 

 
module.exports = App;

所以基本上只要我知道这些都是得到反应，路由器的工作所需要的3个组成部分，但我的渲染功能无法正常工作。

哇噢我定了！有多个问题这里长话短说，确保你跟随教程都是最新的，这里是我最终的解决方案：

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

 

 
var App = React.createClass({ 
 
    render:function(){ 
 
    return(
 

 
     <div> 
 

 
      <Header/> 
 

 
      <div className='container-fluid'> 
 
      {this.props.children} 
 
      {React.cloneElement(this.props.children)} 
 
      </div> 
 

 
      <Footer/> 
 
      
 

 
     </div> 
 
     
 
    ) 
 
    } 
 
}); 
 

 

 
module.exports = App; 
 
//------------------------------------------------------------------------------------ 
 

 

 

 
var React = require('react'); 
 
var ReactDom = require('react-dom'); 
 
var Router = require('react-router').Router; 
 
var Route = require('react-router').Route; 
 
var createBrowserHistory = require('history/lib/createBrowserHistory'); 
 

 

 
var history = createBrowserHistory(); 
 

 
var Header = require('./components/Header'); 
 
var MainBody = require('./components/MainBody'); 
 
var Footer = require('./components/Footer'); 
 
var Routes = require('./Routes.js'); 
 

 

 
ReactDom.render(<Router history={history} routes={Routes} />,document.getElementById('main')); 
 
       
 
       
 
       
 
//------------------------------------------------------------------------------------- 
 
       
 
var React = require('react'); 
 
var Router = require('react-router').Router; 
 
var Route = require('react-router').Route; 
 
var IndexRoute = require('react-router').IndexRoute; 
 
var Link = require('react-router').Link; 
 
var App = require('./components/App') 
 
var MainBody = require('./components/MainBody') 
 

 
var Routes = (
 

 
    <Route path ='/' component ={require('./components/App')}> 
 
     
 
     <IndexRoute component ={require('./components/MainBody')}/> 
 
     
 
     
 

 
    </Route> 
 

 
) 
 

 

 
module.exports = Routes; 
 

 
      

Answer 1

看起来你已经引用的混合物旧的（0.13）和新的（1.0）的例子。

在1.0：

• 都可以响应路由器组件的命名出口
• DefaultRoute与IndexRoute
• {this.props.children}被替换替换使用<RouteHandler/>，作为阵营路由器现在创建阵营与线路零部件元素，并将它们传递in

因此，您的导入应该如下所示：

var { Router, Route, IndexRoute, Link } = require('react-router') 

的upgrade guide 1.0是检查是否可能复制任何例子现在已经过时的便捷方式。