脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react配置路由前缀

react配置路由前缀问题及解决

 更新时间：2026年03月09日 14:55:14   作者：crayon-shin-chan  
在使用 React 配置路由前缀时,需要注意两点：首先,确保资源使用相对路径,可以通过在 `package.json` 中添加 `homepage` 选项或设置确定的前缀来实现；其次,对于 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也要配置前缀，这样在执行前端跳转的时候才能匹配到正确的路由

<Router basename={process.env.REACT_APP_PREFIX}>
    <App />
</Router>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • useReducer createContext代替Redux原理示例解析

    useReducer createContext代替Redux原理示例解析

    这篇文章主要为大家介绍了useReducer createContext代替Redux原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React获取url后面参数的值示例代码

    React获取url后面参数的值示例代码

    这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂，文末给大家补充介绍了react获取URL中参数方法，需要的朋友可以参考下
    2022-12-12
  • React中如何处理承诺demo

    React中如何处理承诺demo

    这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详解React中的不可变值

    详解React中的不可变值

    这篇文章主要介绍了React中的不可变值的相关资料，帮助大家更好的理解和学习使用react.js，感兴趣的朋友可以了解下
    2021-04-04
  • React SSG实现Demo详解

    React SSG实现Demo详解

    这篇文章主要为大家介绍了React SSG实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-07-07
  • React 合成事件的实现

    React 合成事件的实现

    本文主要介绍了React 合成事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-02-02
  • 详解React Native 屏幕适配（炒鸡简单的方法）

    详解React Native 屏幕适配（炒鸡简单的方法）

    React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • React创建组件的三种方式及其区别是什么

    React创建组件的三种方式及其区别是什么

    在React中,创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件,本文就详细的介绍一下如何使用,感兴趣的可以了解一下
    2023-08-08
  • 解决webpack -p压缩打包react报语法错误的方法

    解决webpack -p压缩打包react报语法错误的方法

    这篇文章主要给大家介绍了关于解决webpack -p压缩打包react报语法错误的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • React css-in-js基础介绍与应用

    React css-in-js基础介绍与应用

    随着React、Vue等支持组件化的MVVM前端框架越来越流行，在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢，下面带你了解它
    2022-09-09

最新评论