react基础react-router-dom的基本使用，和react-loadable结合react-router-dom中withRouter实现异步加载组件，提升性能

1、安装react-router-dom,使用路由器BrowserRouter, 路由Route,还有Switch用于处理意外页面

import React, { Component, Fragment } from 'react';
import Header from './component/Header'
import store from './store'
import { Provider } from "react-redux"
// 单个react-loadable进行异步组件
// import Home from './pages/Home/loadable'
// import Details from './pages/Details/loadable'
// 封装使用react-loadable进行异步组件
import loadable from './util/loadable'
import Error from './pages/Error'
import MainLayout from './pages/MainLayout'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
// BrowserRouter 路由器 
// Route 路由 上的 exact属性 是精确匹配的意思， exact的值为bool型，为true表示严格匹配，为false时为正常匹配
// Switch 用来处理 404 页面
// 封装使用react-loadable进行异步组件
const Home = loadable(() => import('./pages/Home'))
const Details = loadable(() => import('./pages/Details'))
// 嵌套路由的使用
// const MainLayout = loadable(() => import('./pages/MainLayout'))
const SubRouterHome = loadable(() => import('./pages/SubRouterHome'))
class App extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Fragment>
        <Provider store={store}>
          <Header></Header>
          <Router>
            <Switch>
              <Route exact path='/' component={Home} />
              {/* 通过url传递参数 */}
              <Route path="/details/:id" component={Details}></Route>
              {/* 嵌套路由 */}
              {/* <Route path="/mainLayout" component={
                <MainLayout>
                  <Route path="/subRouterHome" component={SubRouterHome}></Route>
                </MainLayout>
              }></Route> */}
              <Route component={Error}></Route>
              {/* Switch用来处理404，错误页面必须在最后面 */}
            </Switch>
          </Router>
        </Provider>
      </Fragment>
    )
  }

}

export default App;

2、Router 通过path来接收组件的路由，并且，通过路由传递参数，eg: /detail/:id，在跳转到的组件页面通过this.props.match来获取传递过来的参数，exact为精确匹配，取值有ture和false, component接收跳转到的组件

3、使用react-loadable来异步加载组件，可以节约资源，将其封装调用

import React from 'react'
import Loadable from 'react-loadable' // 异步加载组件，可以加快首屏加载速度

// 通用的过场组件
const loadingComponent = () => {
    return (
        <div>正在加载...</div>
    )
}

export default (loader, loading = loadingComponent) => {
    return Loadable({
        loader,
        loading
    })
}

4、函数式路由跳转、Link组件和withRouter的使用,其次,react-router-dom还有NavLink等组件的使用方式

import React, { PureComponent, Fragment } from 'react'
import { DetailsCard } from './style'
import { Link, withRouter } from 'react-router-dom'
class Details extends PureComponent {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        console.log('获取传递过来的路由参数' + JSON.stringify(this.props.match.params));

    }

    render() {
        const { match } = this.props
        return (
            <Fragment>
                <DetailsCard> 详情页 获取到的路由参数 ------ {match.params.id}</DetailsCard>
                <Link to="/?id=4">去首页</Link>
                <div>
                    <button onClick={() => { this.props.history.goBack() }}>返回上一页</button>
                </div>
                <div>
                    <button onClick={() => { this.props.history.push({ pathname: '/', state: { 'name': 'home' } }) }}>去首页</button>
                </div>
                <div>
                    <button onClick={() => { this.props.history.replace('/') }}>通过replace函数方式返回上一页</button>
                </div>
            </Fragment>
        )
    }
}

export default withRouter(Details)