node.js - ReactJS 路由器问题

Question

我正在使用 Node JS

我做了一个使用 ReactJS Routing 的小项目，但我收到错误，但不知道如何跟踪它。

这是我的代码:

main.js，

"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var routes = require('./routes');


ReactDOM.render(<Router>{routes}</Router>,document.getElementById('app'));

routes.js:

 "use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require ('react-router');

var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

var routes = (
    <Route path="app" path="/" component={require('./components/app')} >
    <DefaultRoute component={require('./components/homePage')} />
    <Route path="authors" component={require('./components/authors/authorPage')} />
    <Route path="about" component={require('./components/about/aboutPage')} />
    </Route>
);

module.exports = routes;

app.js:

var React = require('react');
var ReactDOM = require('react-dom');
var Header = require('./common/header');
var reactRouter = require('react-router');
var RouteHandler = reactRouter.RouteHandler;

$= jQuery = require('jQuery');

class App extends React.Component{
    render(){
        return(<div>
            <Header/> 
            <div className="container-fluid">
            <RouteHandler/>
            </div>
        </div>);
    }

}

module.exports = App;

homePage.js:

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');

class Home extends React.Component {
  render() {
    return (<div className ="jumbotron">
            <h1>Pluralsight</h1>
            <p>React , react route, and flux for ultra-responsive web aps.</p>
            </div>);
  }
}

module.exports = Home;

这是我的文件夹顺序:

我得到的错误是:

Answer 1

您可能忘记在您创建的组件之一中写入module.exports = xxx。如果您在任何文件中使用 export default xxx ，那么在导入它时，您需要编写 var xxx = require(path).default