React+Vite+Tanstack Router如何设置适配所有子目录的灵活基础路径？

1. 修正Tanstack Router的basepath配置 #

你之前用basepath: "./company/the-tool"导致重定向错误，是因为Tanstack Router的basepath需要基于域名根目录的绝对路径前缀，相对路径会触发重复拼接。如果不想固定写死部署路径，可以通过浏览器环境动态获取当前应用所在的目录：

// 动态获取当前部署的基础路径（适配任意子目录）
const getBasePath = () => {
  const currentPath = window.location.pathname;
  // 截取到index.html所在目录的绝对路径
  const basePath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
  return basePath;
};

const router = createRouter({
  routeTree,
  basepath: getBasePath(),
});

这个方法会自动识别应用部署的子目录，不用硬编码/company/the-tool，适配任意部署路径。

2. 保留Vite的相对路径配置 #

你设置的base: "./"是正确的，它确保打包后的资源（JS/CSS/图片等）用相对路径加载，适配任意子目录部署。无需修改这个配置。

3. 配置Apache的重写规则（关键步骤） #

单页应用的前端路由依赖服务器将所有路由请求转发到index.html，否则Apache会把/company/the-tool/about这类路径当成物理文件查找，返回404。

在部署目录（比如/company/the-tool）下创建.htaccess文件，添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 忽略已存在的文件/目录（比如静态资源）
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # 将所有不存在的请求转发到当前目录的index.html
  RewriteRule ^ index.html [L]
</IfModule>

这个配置不需要硬编码子目录路径，只要.htaccess放在应用部署的根目录下，就能适配任意子目录，自动将请求转发到index.html。

4. 验证要点 #

• 部署后访问应用根路径（如http://ip/company/the-tool），确认根布局正常渲染。
• 访问任意路由页面（如http://ip/company/the-tool/about），确认路由组件正确加载，不再跳转404。
• 检查Tanstack Router的路由定义，确保路由路径没有冲突，404路由的优先级低于正常路由。

内容的提问来源于stack exchange，提问作者baitendbidz