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)