react-router-dom異步加載路由的方式是什么

今天小編給大家分享一下react-router-dom異步加載路由的方式是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react-router-dom異步加載路由

在一個spa單頁面應用中如果項目較小的話異步組件可能影響不大，但是如果是一個大的react單頁面項目如果沒有使用異步組件，頁面會在第一次加載的時候加載所有項目中所有的組件嚴重影響頁面的加載速度，異步組件可以讓路由跳轉到對應的路由上才去加載對應的react文件，這樣頁面的加載速度就會得到很大的提升。因此異步組件是非常有必要的。

先來看看異步組件是怎么寫的吧

安裝依賴react-loadable

npm install react-loadable

新建一個js文件。異步組件也是要依賴于react所以要引入react。

意思大概就是在loader引入組件完成前先顯示“正在加載”

//入口文件中不在調用之前的RouterTest組件而是調用這個異步組件
//獲取路由參數的方法需要進行調整要在對應的再組件中調用react-router-dom中的withRouter方法
//然后export default connect(null,null)(withRouter(RouterTest))
import React from 'react'
import Loadable from 'react-loadable'
const LoadingRouterTest = Loadable({
	loader:() => import('./RouterTest.js'),
	loading () {return <div>正在加載</div>}
})
 
export default () => <LoadingRouterTest />

既然用了異步組件其他幾個地方就要做相應的改動。首先是入口文件

我們將RouterTest替換成LoadingRouterTest這個組件

<Route path="/LoadingRouterTest:id" component={LoadingRouterTest}></Route>
          <Route path="/RouterTest:id" component={RouterTest}></Route>

我們跳轉也是跳轉LoadingRouterTest這個路由url變成這樣

但是頁面還是RouterTest。

這里會發現一個問題就是路由的參數獲取不到了

原因是因為url名稱變了但是頁面還是RouterTest

這里需要用到react-router-dom的withRouter

在暴露RouterTest組件的時候使用withRouter這個方法允許RouterTest使用LoadingRouterTest的url參數

export default connect(null,null)(withRouter(RouterTest))

個人認為react-router-dom相對vue-router還是比較復雜的不管是傳參還是異步組件，但是可操作的空間還是有的。

react路由組件異步加載，優化白屏

//手寫異步加載高階組件
import React, { Component } from "react";
 
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
 
      this.state = {
        component: null
      };
    }
 
    async componentDidMount() {
      const { default: component } = await importComponent();
 
      this.setState({component});
    }
 
    render() {
      const C = this.state.component;
 
      return C ? <C {...this.props} /> : null;
    }
  }
 
  return AsyncComponent;
}

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import asyncComponent from '@/utils/asyncComponent';
 
import home from "@/pages/home/home";
const record = asyncComponent(() => import("@/pages/record/record"));
const helpcenter = asyncComponent(() => import("@/pages/helpcenter/helpcenter"));
const production = asyncComponent(() => import("@/pages/production/production"));
const balance = asyncComponent(() => import("@/pages/balance/balance"));
 
// react-router4 不再推薦將所有路由規則放在同一個地方集中式路由，子路由應該由父組件動態配置，組件在哪里匹配就在哪里渲染，更加靈活
export default class RouteConfig extends Component{
  render(){
    return(
      <HashRouter>
        <Switch>
          <Route path="/" exact component={home} />
          <Route path="/record" component={record} />
          <Route path="/helpcenter" component={helpcenter} />
          <Route path="/production" component={production} />
          <Route path="/balance" component={balance} />
          <Redirect to="/" />
        </Switch>
      </HashRouter>
    )
  }
}

 /**注解

   * 路由表中：

   * const record = asyncComponent(() => import("@/pages/record/record"));

   * <Route path="/record" component={record} />

   * --------------------------------------------------------------

   * >>1

   * asyncComponent函數返回了一個組件AsyncComponent,AsyncComponent被record變量接收；

   * asyncComponent函數參數是一個()=>import('xxx')方法，該方法是用來引入文件的，返回的的是一個promise對象。

   * >>2

   * 當react路由匹配到對應路徑,AsyncComponent組件掛在，參數()=>import('xxx')方法在其掛在后執行，將異步加載的組件更改到狀態，并再次重新渲染。

  */

以上就是“react-router-dom異步加載路由的方式是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。