在react.js中使用路由时提供给`Route`的prop`component`无效

时间:2016-06-28 09:09:13

标签: javascript node.js reactjs react-router reactive-programming

这是我得到的错误: 提供给component的道具Route无效。

这是我的index.js

var React= require('react');
var ReactDOM= require('react-dom');
var routes=require('./config/routes')

ReactDOM.render(
    routes,
    document.getElementById('app')
);

这是我的routes.js

var React= require('react');
var ReactRouter= require('react-router');


var Router=ReactRouter.Router;
var Route=ReactRouter.Route; 
var IndexRoute=ReactRouter.IndexRoute;

var Main=require ('../components/Main');
var Home=require ('../components/Home');

var routes=(

    <Router>
        <Route path='/'component={Main}>
            <Route path='/home' component={Home}/>
            </Route>
    </Router>

);

module.exports = routes;

我的main.js

var React= require('react');


var Main= React.createClass({
    render:function(){
        return(
            <div>Hello from main
            {this.props.children}
            </div>


        )
    }
});

module.exports = Main; 

和home.js

var React= require('react');


var Home=React.createClass({
    render:function(){
        return(
            <div>Hello from home</div>

        )
    }
});

module.exports = Home;

1 个答案:

答案 0 :(得分:1)

你写../components/Main。试试../components/main。我认为这是区分大小写的。 Home

也是如此