快捷導(dǎo)航

React路由封裝的實(shí)現(xiàn)淺析

更新時(shí)間：2022年08月13日 14:21:40 作者：是張魚(yú)小丸子鴨

路由是React項(xiàng)目中相當(dāng)重要的概念，對(duì)于功能較為復(fù)雜的網(wǎng)頁(yè)來(lái)說(shuō)，必然會(huì)涉及到不同功能間的頁(yè)面跳轉(zhuǎn)，本篇文章將對(duì)React官方維護(hù)的路由庫(kù)React-Router-Dom的使用和常用組件進(jìn)行講解，同時(shí)對(duì)路由組件傳遞param參數(shù)的方式進(jìn)行講解，希望對(duì)各位讀者有所參考

了解SAP和路由的概念

SAP（single page web application）的意思是單頁(yè)Web應(yīng)用，正如前言所說(shuō)，一般來(lái)說(shuō)功能較為復(fù)雜都會(huì)涉及到頁(yè)面跳轉(zhuǎn)的功能，而傳統(tǒng)的前端頁(yè)面跳轉(zhuǎn)往往是利用<a/>標(biāo)簽進(jìn)行跳轉(zhuǎn)，這種方式雖然可以實(shí)現(xiàn)功能，但是每次跳轉(zhuǎn)到新的頁(yè)面都會(huì)重新對(duì)頁(yè)面的元素進(jìn)行加載，這樣其實(shí)對(duì)于用戶來(lái)說(shuō)是不太友好的。而單頁(yè)Web應(yīng)用則較好的解決了這個(gè)問(wèn)題，因?yàn)镾AP整個(gè)應(yīng)用都是在一個(gè)頁(yè)面上進(jìn)行的，每次的頁(yè)面跳轉(zhuǎn)只涉及到頁(yè)面中對(duì)應(yīng)組件（模塊）的更新操作，這樣就在一定程度上讓頁(yè)面不需要加載重復(fù)的頁(yè)面元素。

再說(shuō)說(shuō)路由

路由其實(shí)可以理解為是一個(gè)映射關(guān)系，即路徑到組件或者函數(shù)的對(duì)應(yīng)關(guān)系，比如說(shuō)/home這個(gè)路徑對(duì)應(yīng)著Home這個(gè)首頁(yè)組件，在React中，有react-router-dom這個(gè)官方維護(hù)的組件庫(kù)來(lái)幫助我們處理項(xiàng)目中的路由問(wèn)題，需要注意的是，我們用create-react-dom創(chuàng)建的react項(xiàng)目，默認(rèn)是沒(méi)有react-router-dom的，所以需要我們自己再額外下載到項(xiàng)目中。

路由封裝流程

封裝路由的文件組件，針對(duì)一級(jí)路由的封裝操作，單獨(dú)路由文件抽離出單獨(dú)的文件中去
src中新建一個(gè)router文件夾，在文件夾新建index.js文件，路由配置文件遷移過(guò)去
router文件夾中新建mapRouter文件，路由配置轉(zhuǎn)換成數(shù)組對(duì)象格式，參考Vue配置
index.js循環(huán)Route組件即可，二級(jí)路由配置先暫時(shí)在父組件中配置即可

注：文件夾的名稱和文件的名字可以隨便定義，無(wú)需完全按照上方流程來(lái)

index.js

import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Routes} from '../src//router/index'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Routes/>
);
reportWebVitals();

router/index.js

//router/index.js文件
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import routes from './mapRoute';
//定義的路由函數(shù)直接掛載到主頁(yè)面上去
const Routes = function () {
    console.log(routes);
    return (
      <Router>
        <Switch>
          {
            routes.map((item,index)=>{
                return (
                    <Route key={index} path={item.path} component={item.component}></Route>
                )
            })
          }
        </Switch>
      </Router>
    )
  }
export default Routes;

HashRouter as Router，這是給HashRouter起的別名，可以不寫(xiě)

router/mapRoute.js路由配置文件

import App from '../App';
import Detail from '../detail';
import Layout from "../admin/layout"
import About from '../pages/About';
const routes = [
    {
        path:"/about",
        title:"About",
        component:About,
    },
    {
        path:"/admin",
        title:"管理后臺(tái)",
        component:Layout,
        exact:false,
    },{
        path:"/detail/:id",
        title:"detail",
        component:Detail,
    },{
        path:"/",
        title:"App",
        component:App,
    }
]
export default routes;

這樣我們r(jià)eact中的路由就封裝好了，他的原理是跟我們vue中的路由一樣，把路由封裝到一個(gè)文件中，然后我們就可以直接在這個(gè)里面添加路由，不同的是，vue中有一個(gè)children屬性用來(lái)定義二級(jí)路由，而react中沒(méi)有

我們?cè)谶@個(gè)js文件中引入路由，然后在index文件中進(jìn)行循環(huán)渲染，同時(shí)也減少了我們的代碼量

不過(guò)需要注意的是，我們?cè)趓eact路由封裝中不能使用二級(jí)路由，這是一個(gè)弊端，我們可以將二級(jí)路由定義在父組件中定義

到此這篇關(guān)于React路由封裝的實(shí)現(xiàn)淺析的文章就介紹到這了,更多相關(guān)React路由封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: