Question

所以我在设置react-router时遇到了很多麻烦。我已经查看了多个教程和指南，以及文档，我只是不知道什么是错的，我真的很感激任何帮助。

如果您想查看更多代码，这里是我在github上的项目的链接，但我认为大多数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;

所以基本上我知道这些是使反应路由器工作所需的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路由器现在使用路径组件创建React元素并将其传递给

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

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

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

设置React-Router时遇到问题

1 个答案: