React Router 不显示我的组件答案

【问题标题】：React Router not displaying my componentsReact Router 不显示我的组件
【发布时间】：2016-05-08 04:07:45
【问题描述】：

我已经阅读了所有其他相同问题的问题，但它对我不起作用。

index.html

<body>
  <h1>Index</h1>
  <div id="app"></div>
</body>

客户端/app.jsx

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Accounts, STATES } from 'meteor/std:accounts-ui';

import { MainLayout } from '../imports/ui/layouts/main.jsx';

import { IndexPage } from '../imports/ui/components/index.jsx';
import { NotFoundPage } from '../imports/ui/components/errors/not-found.jsx';

Meteor.startup( () => {
  render(
    <Router history={ browserHistory }>
      <Route path="/" component={ MainLayout }>
        <IndexRoute component={ IndexPage } />
        <Route path="signin" component={ Accounts.ui.LoginForm } formState={ STATES.SIGN_IN } />
        <Route path="signup" component={ Accounts.ui.LoginForm } formState={ STATES.SIGN_UP } />
      </Route>
      <Route path="*" component={ NotFoundPage } />
    </Router>,
    document.getElementById('app')
  );
});

imports/ui/layouts/main.jsx

import { Component } from 'react';

export default class MainLayout extends Component {
  render() {
    return (
      <div>
        <h2>Main Layout</h2>

        {this.props.children}
      </div>
    );
  }
}

imports/ui/components/index.jsx

import { Component } from 'react';

export default class IndexPage extends Component {
  render() {
    return (
      <div>Index Page</div>
    );
  }
}

imports/ui/components/errors/not-found.jsx

import { Component } from 'react';

export default class NotFoundPage extends Component {
  render() {
    return (
      <div>404 - Not found!</div>
    );
  }
}

所以，除了/signin 或/signup 之外，转到任何 URL 不会显示任何内容，但会显示index.html 中的内容（即react 不会呈现任何内容）

此外，/signin 根本不会渲染 MainLayout。

我尝试过环顾四周，重新阅读文档等。我没有发现我的代码有任何问题，也没有任何错误。那么，为什么它不起作用？

（注意：我昨天安装了所有最新的 npm 模块和软件包的 Meteor 1.3.2.4。）

【问题讨论】：

标签： meteor reactjs react-router

【解决方案1】：

嗯，我出去走走（终于阳光明媚，温暖了！）然后回来了。我看到我的代码和示例here 之间的唯一区别是export 语句......或者更准确地说是export default。

改变

import { MainLayout } from '../imports/ui/layouts/main.jsx';

到

import MainLayout from '../imports/ui/layouts/main.jsx';

是我的错。

【讨论】：