如何配置Express路由，避免子路径覆盖/admin父路径？

当前问题：

• 访问站点会跳转至/admin，符合预期，但/admin的首页内容无法显示
• 点击FAQ页面，预期路径为/admin/FAQ，实际变为/FAQ
• 点击首页，内容能显示，但路径为/而非/admin的首页路径
  需配置让所有路径都处于/admin父路径下，不覆盖该部分。

核心原因 #

问题出在路由基础路径未全局配置，且导航链接使用了绝对路径，导致跳转时脱离了/admin父路径；同时服务器端可能未配置正确的重写规则，导致/admin首页刷新或访问时无法加载内容。

具体解决方案 #

1. 配置路由框架的基础路径 #

根据你使用的前端路由框架，全局设置基础路径为/admin，让所有路由自动拼接该前缀：

• React Router（v6+）
  在创建路由实例时指定basename参数：

  import { createBrowserRouter, RouterProvider } from "react-router-dom";
  import AdminHome from "./AdminHome";
  import FAQ from "./FAQ";
  
  const router = createBrowserRouter(
    [
      { path: "/", element: <AdminHome /> }, // 对应/admin路径
      { path: "/FAQ", element: <FAQ /> }, // 对应/admin/FAQ路径
    ],
    { basename: "/admin" }
  );
  
  ReactDOM.createRoot(document.getElementById("root")).render(
    <RouterProvider router={router} />
  );
  

• Vue Router（v4+）
  创建路由时将history的基础路径设为/admin：

  import { createRouter, createWebHistory } from "vue-router";
  import AdminHome from "./views/AdminHome.vue";
  import FAQ from "./views/FAQ.vue";
  
  const router = createRouter({
    history: createWebHistory("/admin"),
    routes: [
      { path: "/", component: AdminHome },
      { path: "/FAQ", component: FAQ },
    ],
  });
  

2. 修改导航链接为相对路径或框架内置组件 #

不要使用绝对路径的原生<a>标签，改用路由框架提供的链接组件，或使用相对路径：

• React项目：用<Link to="FAQ">FAQ</Link>替代<a href="/FAQ">FAQ</a>，跳转首页用<Link to="/">首页</Link>（已配置basename，会自动转为/admin）。
• Vue项目：用<router-link to="FAQ">FAQ</router-link>替代<a href="/FAQ">FAQ</a>，首页用<router-link to="/">首页</router-link>。
• 纯静态HTML：将链接改为相对路径，比如<a href="FAQ">FAQ</a>（相对于当前/admin路径），首页用<a href=".">首页</a>。

3. 配置服务器端重写规则（解决/admin首页无法显示） #

如果是单页应用，需要服务器将/admin下的所有请求转发到应用入口文件（比如index.html），避免刷新或直接访问/admin时出现404或内容空白：

• Nginx配置示例
  在配置文件中添加：

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

• Apache配置示例
  在.htaccess或配置文件中添加：

  <Directory /path/to/your/app>
      RewriteEngine On
      RewriteBase /admin
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /admin/index.html [L]
  </Directory>
  

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