您好,登錄后才能下訂單哦!
今天小編給大家分享一下react-router-dom異步加載路由的方式是什么的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
在一個(gè)spa單頁(yè)面應(yīng)用中如果項(xiàng)目較小的話異步組件可能影響不大,但是如果是一個(gè)大的react單頁(yè)面項(xiàng)目如果沒(méi)有使用異步組件,頁(yè)面會(huì)在第一次加載的時(shí)候加載所有項(xiàng)目中所有的組件嚴(yán)重影響頁(yè)面的加載速度,異步組件可以讓路由跳轉(zhuǎn)到對(duì)應(yīng)的路由上才去加載對(duì)應(yīng)的react文件,這樣頁(yè)面的加載速度就會(huì)得到很大的提升。因此異步組件是非常有必要的。
先來(lái)看看異步組件是怎么寫的吧
npm install react-loadable
新建一個(gè)js文件。異步組件也是要依賴于react所以要引入react。
意思大概就是在loader引入組件完成前先顯示“正在加載”
//入口文件中不在調(diào)用之前的RouterTest組件而是調(diào)用這個(gè)異步組件 //獲取路由參數(shù)的方法需要進(jìn)行調(diào)整要在對(duì)應(yīng)的再組件中調(diào)用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 />
既然用了異步組件其他幾個(gè)地方就要做相應(yīng)的改動(dòng)。首先是入口文件
我們將RouterTest替換成LoadingRouterTest這個(gè)組件
<Route path="/LoadingRouterTest:id" component={LoadingRouterTest}></Route> <Route path="/RouterTest:id" component={RouterTest}></Route>
我們跳轉(zhuǎn)也是跳轉(zhuǎn)LoadingRouterTest這個(gè)路由url變成這樣
但是頁(yè)面還是RouterTest。
這里會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題就是路由的參數(shù)獲取不到了
原因是因?yàn)閡rl名稱變了但是頁(yè)面還是RouterTest
這里需要用到react-router-dom的withRouter
在暴露RouterTest組件的時(shí)候使用withRouter這個(gè)方法允許RouterTest使用LoadingRouterTest的url參數(shù)
export default connect(null,null)(withRouter(RouterTest))
個(gè)人認(rèn)為react-router-dom相對(duì)vue-router還是比較復(fù)雜的不管是傳參還是異步組件,但是可操作的空間還是有的。
//手寫異步加載高階組件 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 不再推薦將所有路由規(guī)則放在同一個(gè)地方集中式路由,子路由應(yīng)該由父組件動(dòng)態(tài)配置,組件在哪里匹配就在哪里渲染,更加靈活 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函數(shù)返回了一個(gè)組件AsyncComponent,AsyncComponent被record變量接收; * asyncComponent函數(shù)參數(shù)是一個(gè)()=>import('xxx')方法,該方法是用來(lái)引入文件的,返回的的是一個(gè)promise對(duì)象。 * >>2 * 當(dāng)react路由匹配到對(duì)應(yīng)路徑,AsyncComponent組件掛在,參數(shù)()=>import('xxx')方法在其掛在后執(zhí)行,將異步加載的組件更改到狀態(tài),并再次重新渲染。 */
以上就是“react-router-dom異步加載路由的方式是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。