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": "."
}

或者也可以加上确定的前缀

对于 react router也要配置前缀，这样在执行前端跳转的时候才能匹配到正确的路由

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

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