如何在浏览器地址栏中隐藏URL中的组件名称

一、前端路由配置（单页应用场景） #

现代前端框架（React、Vue、Angular）都支持前端路由，通过配置友好的路由规则，就能彻底隐藏组件文件名：

React Router 示例（v6版本） #

把路由路径设为语义化的/parametrage-agence，映射到ParametrageAgence.jsx组件，地址栏不会暴露原组件名：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ParametrageAgence from './ParametrageAgence.jsx';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/parametrage-agence" element={<ParametrageAgence />} />
        {/* 其他路由配置 */}
      </Routes>
    </BrowserRouter>
  );
}

访问http://localhost:3000/parametrage-agence即可加载目标组件，地址栏完全看不到.jsx后缀和原组件文件名。

Vue Router 示例 #

Vue项目同理，配置语义化路由替代组件文件名：

import { createRouter, createWebHistory } from 'vue-router';
import ParametrageAgence from './views/ParametrageAgence.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/parametrage-agence', component: ParametrageAgence },
    {/* 其他路由 */}
  ]
});

二、服务器端URL重写（非单页应用/静态资源场景） #

如果是传统多页应用，或者需要处理静态文件的URL隐藏，可以通过服务器配置实现请求转发：

Nginx 配置示例 #

在server块中添加重写规则，将用户访问的友好路径转发到真实组件文件：

server {
  listen 3000;
  server_name localhost;

  location /parametrage-agence {
    rewrite ^/parametrage-agence$ /ParametrageAgence.jsx last;
  }
}

用户访问http://localhost:3000/parametrage-agence时，服务器实际返回ParametrageAgence.jsx的内容，地址栏保持友好路径不变。

Apache 配置示例 #

在项目根目录的.htaccess文件中添加规则：

RewriteEngine On
RewriteRule ^parametrage-agence$ ParametrageAgence.jsx [L]

实现效果和Nginx一致，彻底隐藏真实文件名。

三、关于URL编码处理的说明 #

编码处理可以实现，但不推荐作为隐藏组件名的常规方案：

• 编码后的URL（比如把ParametrageAgence.jsx转成ParametrageAgence%2Ejsx）仍可被解码还原，无法真正隐藏组件名，只是视觉上不直观。
• 编码后的URL不利于用户识别、分享，也不符合SEO友好的原则。
• 若只是想避免暴露技术细节，前端路由或服务器重写的方案更可靠，能完全替换掉真实文件名。

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