網站首頁 編程語言 正文
了解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路由封裝中不能使用二級路由,這是一個弊端,我們可以將二級路由定義在父組件中定義
原文鏈接:https://blog.csdn.net/qq_60976312/article/details/126181600
相關推薦
- 2023-01-26 C#實現Word轉換TXT的方法詳解_C#教程
- 2021-12-12 linux縮減XFS分區格式的根目錄_Linux
- 2022-03-10 使.NET6在開發時支持IIS_基礎應用
- 2022-07-31 Android?中的類文件和類加載器詳情_Android
- 2022-11-20 關于rust的模塊引入問題_相關技巧
- 2022-04-25 python遞歸&迭代方法實現鏈表反轉_python
- 2022-04-11 關于出現“Content type ‘application/x-www-form-urlencod
- 2022-05-22 C#編程之依賴倒置原則DIP_C#教程
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支