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