部署项目至Hosting后仅显示首页，无法跳转其他页面求助

问题根源 #

单页应用（SPA）的路由逻辑由前端处理，服务器收到/login这类非根路径请求时，会默认去服务器上查找对应文件，找不到就返回404，不会自动转发到首页让前端路由接管。

具体解决步骤 #

针对Vercel平台 #

在项目根目录新建vercel.json文件，写入以下配置：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

配置完成后重新部署，所有路径请求都会被转发到首页，由前端路由处理。

其他静态Hosting通用配置 #

• Netlify：根目录新建_redirects文件，内容写：

/*    /index.html   200

• Nginx服务器：修改配置文件，添加规则：

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

检查项目自身路由 #

• 确认项目使用的是BrowserRouter（而非HashRouter），如果是HashRouter，路径会带#（比如/#/login），这种模式一般不会有部署问题；如果是BrowserRouter，则必须配置服务器转发规则。
• 核对路由代码，确保/login路径已经正确关联到对应的登录组件。

验证 #

配置完成重新部署后，直接访问/login路径，或者从首页跳转后刷新页面，确认页面能正常加载。

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