设置 React-Router 时遇到问题

Question

所以我在设置 react-router 时遇到了很多麻烦。我查看了多个教程和指南以及文档，但我不知道哪里出了问题，非常感谢任何帮助。

如果您想查看更多代码，这是我在 github 上的项目的 link，但我认为大部分 react-router 代码都被注释掉了： 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;

据我所知，基本上这些是让 react-router 工作所需的 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 中：

所有 React Router 组件都命名为 exports
DefaultRoute 替换为 IndexRoute
{this.props.children} 取代了 <RouteHandler/> 的使用，因为 React Router 现在使用路由组件创建 React 元素并将它们传递给

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

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

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

设置 React-Router 时遇到问题

Trouble Setting up React-Router

javascript

url-routing

reactjs

react-router