nanostores/router无法拦截含'.'的URL子路径问题求助

当URL子路径包含英文句号时，浏览器会默认认为这是在请求静态文件（比如abc.d会被识别为带后缀的文件），此时请求直接由服务器处理——服务器会尝试查找对应路径下的文件，找不到就返回HTTP 404错误，根本不会把请求转发给SPA的入口文件（比如index.html）。这就导致前端路由（包括nanostores/router）完全没机会触发，自然无法渲染自定义404页面。

你用window.location.replace的方法在Firefox中有效，是因为Firefox对这类路径的处理逻辑更宽松，或者你的服务器配置在Firefox的请求下，依然把带.的路径转发到了入口文件，让前端JS有机会执行并修改路径。但Chrome和Edge严格遵循“带.的路径是静态文件请求”的逻辑，服务器直接返回404，前端代码根本没运行的机会，所以这个方法无效。

核心思路是让服务器把所有非静态资源的请求（包括带.的路径）都转发到SPA入口文件，确保前端路由能接管请求。以下是常见服务器的配置示例：

Nginx #

修改配置文件，在location块中添加规则：

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

该规则会优先查找实际存在的文件或目录，找不到就转发到index.html，交给前端路由处理。

Apache #

在项目根目录创建.htaccess文件，添加：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

作用和Nginx类似，排除真实存在的文件/目录后，其余请求都转发到index.html。

Vercel/Netlify等静态托管平台 #

这类平台支持通过配置文件指定SPA路由规则：

• Vercel：在vercel.json中添加：

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

• Netlify：在netlify.toml中添加：

  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
  

前端补充处理（可选） #

如果服务器配置暂时无法修改，可以尝试在页面的head中添加一段JS，在页面加载前拦截路径中的.——但这个方法只能处理服务器已经转发请求的情况，无法解决服务器直接返回404的场景：

if (window.location.pathname.includes('.')) {
  const cleanPath = window.location.pathname.replace(/\./g, '');
  window.history.replaceState({}, '', cleanPath + window.location.search + window.location.hash);
}

注意用history.replaceState而非location.replace，避免触发页面重新加载。

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