React Router项目中解决静态资源路径配置问题

在React Router项目中，当我们需要将应用部署到子路径时，经常会遇到静态资源路径配置不正确的问题。本文将详细介绍如何正确配置React Router和Vite，确保应用在子路径下能够正常加载所有资源。

问题背景

在基于React Router和Vite构建的项目中，开发者经常需要将应用部署到服务器的子路径下（如/myapp/）。这时会遇到两个关键问题：

1. 应用路由需要以子路径为基准
2. 静态资源（JS、CSS等）需要从正确的子路径加载

解决方案

1. 配置React Router的basename

首先需要在React Router配置中设置basename，这个值应该与部署的子路径一致：

// react-router.config.ts
export default {
  basename: "/myapp/", // 注意结尾的斜杠
  ssr: false,
} satisfies Config;

basename告诉React Router所有路由都应该以这个路径为基准。例如，如果应用中有/about路由，实际访问路径将是/myapp/about。

2. 配置Vite的base选项

仅仅配置React Router还不够，还需要配置Vite的base选项，这会影响打包后静态资源的引用路径：

// vite.config.ts
export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  base: '/myapp/' // 必须与basename保持一致
});

这个配置会确保所有打包生成的静态资源路径都包含/myapp/前缀。

注意事项

1. 斜杠的重要性：在配置basename和base时，结尾的斜杠(/)非常重要。缺少斜杠可能导致路径解析问题。

2. 一致性原则：basename和base的值必须完全一致，包括大小写和斜杠。

3. 开发环境测试：建议在开发环境就测试子路径配置，可以使用Vite的预览功能：

   npm run build
   npm run preview
   

4. 服务器配置：部署时还需要确保服务器正确地将请求代理到你的应用。对于Nginx，可能需要添加类似如下的配置：

   location /myapp/ {
     try_files $uri /myapp/index.html;
   }
   

替代方案比较

有些开发者可能习惯使用package.json中的homepage字段来配置应用基础路径，这在Create React App(CRA)中是常见做法。然而：

1. Vite不原生支持homepage字段
2. 使用Vite的base选项是更直接和可靠的方式
3. 这种方法与React Router的集成更加无缝

总结

在React Router与Vite结合的项目中，正确配置子路径部署需要同时考虑路由基准和静态资源路径。通过协调设置React Router的basename和Vite的base选项，可以确保应用在子路径下正常工作。记住保持这两个配置的一致性，并注意结尾斜杠的处理，这样就能避免大多数与路径相关的问题。