React-从0到1搭建一个React项目（二）

本篇是《从0到1搭建react项目》的第二篇，主要介绍react路由配置、数据层和容器层实现。
相关文章：React-从0到1搭建一个React项目（一）

react路由

react-router基本已成为react路由的标准解决方案。我使用的是react-router-dom。
react-router包含了所有react-router-dom和react-router-native的公共组件，实现了路由的核心功能。通常情况下，如果是开发web应用，使用react-router-dom就能满足需求。如果是用react-native开发，就用react-router-native。
具体的一些介绍，可以参考：

1. https://github.com/ReactTraining/react-router/issues/4648
2. https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other

路由配置

路由的使用可以参考官方文档。也可以按下面的步骤来：

1. 在项目src目录下新建一个routes.js文件，用来管理所有的路由。这里import了App组件，如果后续还有别的组件，import进来，增加一条Route即可

import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from './App'

const AppRouter = () => (
  <Router >
    <div>
      <Route path={ "/" } exact={ true } component={ App } />
    </div>
  </Router>
);

export default AppRouter;

2. 在index.js文件中引入AppRouter

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import AppRouter from './routes'

ReactDOM.render(<AppRouter />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

<