meteor Meteor + React + ReactRouter Add React + ReactRouter


Example

If necessary, change to your project directory cd MyAwesomeProject

1- Add react and react-router

meteor npm install --save react-router@3.0.0 react@15.5.4 react-dom@15.5.4

2- Edit client/main.html, and replace the content will be:

 <body>
    <div id="react-root"></div>
 </body>

Whatever the reactRouter decides to show, it will show it in the '#react-root' element

3- Create the Layouts file in imports/ui/layouts/App.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class App extends Component {
  constructor(props) {
    super(props);
  }

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

App.propTypes = {
  children: PropTypes.node
};

export default App;

4- Create the Routes file in imports/startup/client/Routes.jsx

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import App from '../../ui/layouts/App.jsx';

import NotFound from '../../ui/pages/NotFound.jsx';
import Index from '../../ui/pages/Index.jsx';


class Routes extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router history={ browserHistory }>
        <Route path="/" component={ App }>
          <IndexRoute name="index" component={ Index }/>
          <Route path="*" component={ NotFound }/>
        </Route>
      </Router>
    );
  }
}

Routes.propTypes = {};


Meteor.startup(() =>{
  ReactDOM.render(
    <Routes/>,
    document.getElementById('react-root')
  );
});

Note:

  • I'm skipping some other files that you will need to create, to make things shorter. Specifically, check for imports/ui/pages{Index.jsx,NotFound.jsx}.

  • You can view a full example in https://github.com/rafa-lft/Meteor_React_Base. Look for tag Step2_ReactRouter