React路由封裝的實現淺析

2022-08-13 18:01:02

瞭解SAP和路由的概念

SAP（single page web application）的意思是單頁Web應用，正如前言所說，一般來說功能較為複雜都會涉及到頁面跳轉的功能，而傳統的前端頁面跳轉往往是利用<a/>標籤進行跳轉，這種方式雖然可以實現功能，但是每次跳轉到新的頁面都會重新對頁面的元素進行載入，這樣其實對於使用者來說是不太友好的。而單頁Web應用則較好的解決了這個問題，因為SAP整個應用都是在一個頁面上進行的，每次的頁面跳轉只涉及到頁面中對應元件（模組）的更新操作，這樣就在一定程度上讓頁面不需要載入重複的頁面元素。

再說說路由

路由其實可以理解為是一個對映關係，即路徑到元件或者函數的對應關係，比如說/home這個路徑對應著Home這個首頁元件，在React中，有react-router-dom這個官方維護的元件庫來幫助我們處理專案中的路由問題，需要注意的是，我們用create-react-dom建立的react專案，預設是沒有react-router-dom的，所以需要我們自己再額外下載到專案中。

路由封裝流程

封裝路由的檔案元件，針對一級路由的封裝操作，單獨路由檔案抽離出單獨的檔案中去
src中新建一個router資料夾，在資料夾新建index.js檔案，路由組態檔遷移過去
router資料夾中新建mapRouter檔案，路由設定轉換成陣列物件格式，參考Vue設定
index.js迴圈Route元件即可，二級路由設定先暫時在父元件中設定即可

注：資料夾的名稱和檔案的名字可以隨便定義，無需完全按照上方流程來

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';
//定義的路由函數直接掛載到主頁面上去
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起的別名，可以不寫

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:"管理後臺",
        component:Layout,
        exact:false,
    },{
        path:"/detail/:id",
        title:"detail",
        component:Detail,
    },{
        path:"/",
        title:"App",
        component:App,
    }
]
export default routes;

這樣我們react中的路由就封裝好了，他的原理是跟我們vue中的路由一樣，把路由封裝到一個檔案中，然後我們就可以直接在這個裡面新增路由，不同的是，vue中有一個children屬性用來定義二級路由，而react中沒有

我們在這個js檔案中引入路由，然後在index檔案中進行迴圈渲染，同時也減少了我們的程式碼量

不過需要注意的是，我們在react路由封裝中不能使用二級路由，這是一個弊端，我們可以將二級路由定義在父元件中定義

到此這篇關於React路由封裝的實現淺析的文章就介紹到這了,更多相關React路由封裝內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React路由封裝的實現淺析

目錄

瞭解SAP和路由的概念

再說說路由

路由封裝流程

熱門文章