react配置路由前綴問題及解決
更新時間：2026年03月09日 14:55:14 作者：crayon-shin-chan
在使用 React 配置路由前綴時,需要注意兩點：首先,確保資源使用相對路徑,可以通過在 `package.json` 中添加 `homepage` 選項或設置確定的前綴來實現(xiàn)；其次,對于 React Router,也需要配置相同的前綴,以確保前端跳轉時能夠匹配到正確的路由
react 配置路由前綴需要注意兩點
1.資源使用相對路徑
默認情況下，react 編譯后的資源使用根路徑 / ，也就是長下面這樣
<script src="/static/js/2.dfc7d8c4.chunk.js"></script>
想要讓資源使用相對路徑，在 create-react-app中需要添加 homepage 選項到 package.json
{
"name": "ground-listener-admin",
"version": "0.1.0",
"private": true,
"homepage": "."
}或者也可以加上確定的前綴
2.路由前綴
對于 react router也要配置前綴，這樣在執(zhí)行前端跳轉的時候才能匹配到正確的路由
<Router basename={process.env.REACT_APP_PREFIX}>
<App />
</Router>總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡單易懂，文末給大家補充介紹了react獲取URL中參數(shù)方法，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了React中的不可變值的相關資料，幫助大家更好的理解和學習使用react.js，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了React?SSG實現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
本文主要介紹了React 合成事件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-02-02
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
React創(chuàng)建組件的三種方式及其區(qū)別是什么
在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類組件和使用React Hooks的函數(shù)式組件,本文就詳細的介紹一下如何使用,感興趣的可以了解一下2023-08-08
這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
隨著React、Vue等支持組件化的MVVM前端框架越來越流行，在js中直接編寫css的技術方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢，下面帶你了解它2022-09-09