React Router 不显示我的组件

Question

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

index.html

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

client/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>
    );
  }
}

因此，转到 any URL except /signin or /signup 除了 index.html 中的内容之外什么都没有显示（即反应不渲染任何东西）

此外，/signin 根本不会呈现 MainLayout。

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

(注意： 我昨天安装了 Meteor 1.3.2.4 和所有最新的 npm 模块和包。)

Answer 1

好吧，我出去走了走（天气终于晴朗暖和了！）然后回来了。我在我的代码和示例 here 之间看到的唯一区别是 export 语句......或者 export default 更精确。

从

更改

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

到

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

是我的错误。

React Router 不显示我的组件

React Router not displaying my components

meteor

reactjs

react-router

index.html

client/app.jsx

imports/ui/layouts/main.jsx

imports/ui/components/index.jsx

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