添加 React ReactRouter

Created: November-22, 2018

如有必要，请转到项目目录 cd MyAwesomeProject

1-添加反应和反应路由器

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

2-编辑 client / main.html，并替换内容将是：

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

无论 reactRouter 决定显示什么，它都会在’#react-root’元素中显示它

3-在 imports / ui / layouts / App.jsx 中创建 Layouts 文件

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-在 imports / startup / client / Routes.jsx 中创建 Routes 文件

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

注意：

我正在跳过你需要创建的其他文件，以缩短时间。具体来说，检查导入/ ui / pages {Index.jsx，NotFound.jsx}。
你可以在 https://github.com/rafa-lft/Meteor_React_Base 中查看完整示例。寻找标签 Step2_ReactRouter