React Router not displaying my components

2
votes

I have read all the other questions with the same issue, but it just doesn't work for me.

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

So, going to any URL except /signin or /signup does not show anything but what's in index.html (i.e. react does not render anything)

enter image description here

Moreoever, /signin does not render MainLayout at all.

enter image description here

I have tried looking around, re-read the docs, etc. I don't see anything wrong with my code, and there is no error whatsoever. So, why isn't it working?

(Note: I have Meteor 1.3.2.4 with all latest npm modules and packages installed yesterday.)

1
meteorreactjsreact-router

1 Answers

4
votes

Well, I went walking outside (it's finally sunny and warm!) and came back. The only difference I saw between my code and the example here was the export statement... or export default to be more precise.

Changing from 

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

to

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

was my mistake.

enter image description here