(2) react-router 的使用

为学习react的全家桶而努力中。以前学习一种框架如 thinkphp亦或者是vue中学的比较平坦。我猜原因有二： 其一、react是独自一人通过空闲时间学习,以前是直接在项目中，想必定是人多力量大的缘故；其二、react的生态确实比较繁华，react不单单是一个框架，更感觉是一个生态。继续开始学习React 的一个漫长的过程。

基本情况

React Router被拆分成四个包

其中react-router-dom、react-router-native、react-router-config都依赖于react-router,
以使用react-router-dom为例。并不是引用了react-router-dom了就没有用到react-router，而是react-router-dom内置了react-router

{
  "name": "react-router-dom",
  "version": "4.3.1",
  "description": "DOM bindings for React Router",
   //******
  "dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.4",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.6.1",
    "react-router": "^4.3.1",
    "warning": "^4.0.1"
  },
  //******
}

安装

    yarn add react-router-dom

使用

• 初始版

目录结构如下

.
├── index.js
├── router
│   └── index.js
└── views
    ├── auth
    └── home

router/index.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'

/** 路由配置 start */
import Home from '../views/home/index'
import Page1 from '../views/auth/index'
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/page1',
    component: Page1
  }
]
/** 路由配置 end */

const routeConfig = routes.map((route, i) => {
  return (
    <Route
      exact
      path={route.path}
      render={props => <route.component {...props} routes={route.routes} />}
      key={i}
    />
  )
})

// 组装
const getRouter = () => (
  <Router>
    <div>
      <Switch>{routeConfig}</Switch>
    </div>
  </Router>
)
export default getRouter

index.js

import ReactDOM from 'react-dom'
import getRouter from './router'
ReactDOM.render(getRouter(), document.getElementById('root'))

• 优化版 将 router/index.js 拆分

├──index.js
── router
│   ├── index.js
│   └── routes.js
└── views
    ├── auth
    └── home

router/index.js

import React from 'react'
import { Provider } from 'react-redux'
import PropTypes from 'prop-types'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import routes from './routes'

const routeConfig = routes.map((route, i) => {
  return (
    <Route
      exact
      path={route.path}
      render={props => <route.component {...props} routes={route.routes} />}
      key={i}
    />
  )
})
// 组装
const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
        <Switch>{routeConfig}</Switch>
    </Router>
  </Provider>
)
Root.propTypes = {
  store: PropTypes.object.isRequired
}
export default Root

router/routes.js

/** 路由配置 start */
import Home from '../views/home'
import Page1 from '../views/auth'
// console.log(Home)
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/page1',
    component: Page1
  }
]
/** 路由配置 end */

export default routes

因为这是我的dome项目，所以暂时了解到此。对后期还有一个 异步加载配置 将在后期补上