兩種路由模式(React-Router 8)

倆種路由模式
各個主流框架的路由常用的路由模式有倆種,history模式和hash模式,ReactRouter分別由createBrowerRouter和createHashRouter函數負責創建

附帶代碼:

import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";
import NotFound from "../page/NotFount";
import { createBrowserRouter, createHashRouter } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Layout></Layout>,children: [// 設置為默認二級路由 一級路由訪問的時候,它也能得到渲染{index: true,element: <Board></Board>,},{path: "about",element: <About></About>,},],},{path: "/login",element: <Login></Login>,},{// searchParams 傳參// path: "/article",// params 傳參path: "/article/:id/:name",element: <Article></Article>,},{path: "*",element: <NotFound></NotFound>,},
]);export default router;

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/92023.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/92023.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/92023.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【01】OpenCV C++實戰篇——基于多項式插值的亞像素邊緣定位算法

文章目錄一. 背景二. 你的經歷三. 代碼實現(龜速版——單線程)3.1 梯度幅值3.1.1 生成 8 個方向模板3.1.2 計算梯度3.1.3 顯示梯度圖像3.1.4 程序運行演示3.2 梯度方向 &#xff08;梯度最大幅度值和方向&#xff09;3.3 單像素邊緣3.4 梯度單像素邊緣提取 運行測試四 、亞像素…

400V降24V,200mA,應用領域:從生活到工業的 “全能電源管家”WD5208

WD5208 電源芯片&#xff1a;小身材蘊藏大能量的電源控制新星在電源芯片的技術星河中&#xff0c;WD5208 憑借獨特性能與廣泛適用性嶄露頭角&#xff0c;成為眾多電子設備電源方案的優選。本文將全面解析這款芯片的核心優勢、應用場景與技術細節&#xff0c;展現其 “小身材&am…

C++ 引用 和 指針 的區別

特性引用指針初始化不能為 null&#xff0c;必須綁定到有效的對象可以為 null&#xff0c;不指向任何對象重新綁定不能重新綁定&#xff0c;一旦初始化后始終引用同一個對象可以重新指向其他對象內存占用不占用額外內存&#xff0c;編譯器通常將其優化為所引用的對象占用額外內…

Claude Code實戰體驗:AI智能編程助手如何重塑開發工作流?

一、背景介紹 AI大模型的爆發&#xff0c;讓各種智能編碼工具如雨后春筍般涌現。Claude Code就是其中非常有代表性的一款——它不僅能補全代碼、查找Bug&#xff0c;還能理解復雜需求&#xff0c;甚至幫你寫文檔、生成測試用例。作為一名全棧開發者&#xff0c;我和團隊最近幾個…

centos7 個人網站搭建之gitlab私有化部署實現線上發布

文章目錄 效果展示架構設計申請免費阿里云服務器嘗試連接遠程服務 開放端口申請域名 綁定云服務器組網網關服務器配置轉發代理網關服務器配置ssl 證書問題排查證書申請時報錯&#xff1a;Set the \server_name\ directive ti use the Nginx installer. gitlab私有化部署搭建git…

小米4A千兆版路由器刷機,解決Telnet無法連接問題

刷機極容易變磚&#xff0c;建議完全理清步驟后再進行操作 工具準備 1、小米4A千兆版路由器&#xff08;注意一定是千兆版&#xff0c;只是4A無千兆按下列步驟會變磚&#xff09;&#xff0c;適配電源線 2、網線一根 3、需保證刷機過程中網線接入是有網的&#xff0c;無需賬號認…

計算機網絡:如何將一個B類IP地址分為4個子網

要將一個B類IP地址劃分為4個子網&#xff0c;需通過子網掩碼擴展&#xff08;即借位&#xff09;來實現。以下是詳細步驟和原理&#xff1a; 一、B類IP地址的基礎特性 默認網絡位&#xff1a;B類地址前16位為網絡位&#xff08;標識網絡&#xff09;&#xff0c;后16位為主機位…

K8S 性能瓶頸排查

K8S 性能瓶頸排查 隨著業務量增長,Kubernetes 集群經常出現: ? Pod 啟動慢? ? API 響應慢? ? 節點 CPU 飆高? ? 服務無故中斷? 這可能是性能瓶頸在悄悄作祟。 性能瓶頸全局視角 # K8S 性能瓶頸排查思維導圖- 集群層面- API Server 響應慢- Etcd 壓力大- 控制面組件…

實習005 (web后端springboot)

五種創建方式一、方法一&#xff08;直接創建&#xff09;二、方法二&#xff08;阿里云&#xff09;三、方法三&#xff08;從官網&#xff09;或者說四、方法四、&#xff08;案例云官網&#xff09;五、方法五、&#xff08;自己寫&#xff09;先構建javaweb項目刷新后還是出…

基于vscode連接服務器實現遠程開發

目錄 一、背景介紹 1.1 什么是遠程開發 1.2 版本清單 二、以Java項目開發為例 2.1 安裝遠程開發插件 2.2 安裝語言開發插件 2.3 新建ssh連接 2.4 打開服務器目錄 一、背景介紹 1.1 什么是遠程開發 遠程開發是基于服務器環境進行實現本地開發操作&#xff0c;…

Java與Kotlin中“==“、“====“區別

一、Kotlin 中的區別&#xff08;雙等于&#xff09; - 結構相等性檢查比較兩個對象的內容是否相等&#xff08;相當于調用 equals() 方法&#xff09;。自動處理 null 安全&#xff1a;a b 等價于 a?.equals(b) ?: (b null)。示例&#xff1a;val s1 "Hello" v…

接口自動化測試框架-AIM

3天精通Postman接口測試&#xff0c;全套項目實戰教程&#xff01;&#xff01;最近在做公司項目的自動化接口測試&#xff0c;在現有幾個小框架的基礎上&#xff0c;反復研究和實踐&#xff0c;搭建了新的測試框架。利用業余時間&#xff0c;把框架總結了下來。 AIM框架介紹 …

Orange的運維學習日記--28.Linux邏輯卷詳解

Orange的運維學習日記–28.Linux邏輯卷詳解 文章目錄Orange的運維學習日記--28.Linux邏輯卷詳解為什么使用 LVM基本概念創建物理卷創建卷組創建邏輯卷創建文件系統并掛載清理 LVM 對象擴展與縮減邏輯卷擴展 LV縮減 LV調整文件系統大小擴展 XFS 文件系統擴展 EXT4 文件系統縮減 …

AI大模型學習三十三、HeyGem.ai 服務端(ubuntu)docker 安裝 /客戶端(win)分離部署

一、說明服務端安裝官方安裝客戶端在windows 上安裝解決分離問題利用samba實現共享&#xff0c;我是在局域網訪問&#xff0c;安裝道理可以在非局域網訪問重新弄了一塊顯卡&#xff0c;所以驅動也重新裝下二、環境準備(base) mucunax58:~$ lsb_release -a No LSB modules are …

AI在安全方面的十個應用場景

人工智能&#xff08;AI&#xff09;正在重塑安全領域的“游戲規則”&#xff0c;把“被動防御”變成“主動狩獵”。綜合當前主流實踐與最新案例&#xff0c;可將其應用歸納為以下十大場景&#xff1a;威脅檢測與狩獵利用機器學習/深度學習模型對網絡流量、終端行為和云端日志進…

Android --- Bug調查經驗記錄

文章目錄1.布局中Pag不顯示的問題2.數據庫降級問題3.RecycleView 列表滑動卡頓1.布局中Pag不顯示的問題 在調查一個pag不顯示的問題&#xff0c;整體邏輯沒有問題&#xff0c;但是就是不顯示 pag不顯示的根本原因大概有文件找不到&#xff0c;一個是路徑問題&#xff0c;一個是…

【C語言】深度剖析指針(三):回調機制、通用排序與數組指針邏輯

文章目錄一、回調函數&#xff1a;通過函數指針實現靈活調用1.1 什么是回調函數&#xff1f;1.2 回調函數的實際應用&#xff1a;簡化計算器代碼二、qsort函數2.1 qsort函數的參數說明2.2 使用qsort排序整型數據2.3 使用qsort排序結構體數據示例&#xff1a;學生信息排序2.4 qs…

sql調優總結

sql調優 線上發現部分sql查詢時間過長。使用explain觀察是否命中表的索引。未命中索引&#xff0c;使用 TABLE add index 語句添加索引。 除此之外&#xff0c;單個字段命中聯合索引的情況也會導致查詢變慢 針對多個字段的查詢可添加聯合索引。 總結如下慢sql的原因&#xff1a…

如何在nuxt項目中使用axios進行網絡請求?

在 Nuxt 項目中使用 Axios 進行網絡請求有兩種常用方式&#xff1a;一是直接安裝 Axios 并全局配置&#xff0c;二是使用 Nuxt 官方推薦的 nuxtjs/axios 模塊&#xff08;更便捷&#xff09;。以下是詳細步驟&#xff1a; 方法一&#xff1a;使用官方推薦的 nuxtjs/axios 模塊&…

Unity 實現手機端和電腦項目在局域網內通信

電腦端啟動后自動廣播自身存在&#xff0c;手機端啟動后監聽廣播并發現服務器。發現后自動建立 UDP 連接&#xff0c;雙方可互發消息。內置心跳檢測&#xff0c;網絡中斷時會自動檢測并提示斷開using UnityEngine; using System.Net; using System.Net.Sockets; using System.T…