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 [email protected] [email protected] [email protected]
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
