新增 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