在 react.js 中使用路由时提供给“Route”的无效道具“组件”答案

【问题标题】：Invalid prop `component` supplied to `Route` while using route in react.js在 react.js 中使用路由时提供给“Route”的无效道具“组件”
【发布时间】：2016-06-28 09:09:13
【问题描述】：

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

这是我的 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;

【问题讨论】：

routes.js有语法错误：var routes=(....)，应该是var routes={....}
不应该 main.js 和 home.js 是 main.jsx 和 home.jsx ???
路由工作正常，这只是我不知道的区分大小写的问题。
@Ursus: 没有var routes=(....) 很好，就像var routes=....。 ( ) 无论如何都是无用的。但是使用{ } 是错误的
@Kishore Barik：使用js 与jsx 一样好。这取决于您的捆绑程序（webpack，...）如何跟踪您的文件

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

【解决方案1】：

你写../components/Main。试试../components/main。我认为它区分大小写。 Home也一样

【讨论】：