如何让React Router忽略指定URL？Apache部署React项目404问题求解

1. 修复Apache环境非根路径404错误 #

该问题是BrowserRouter基于HTML5 History API实现的特性导致的，本地开发环境的devServer默认配置了History fallback规则，而Apache默认会将路径当作真实存在的文件/目录检索，找不到就返回404。你需要在React项目打包后的根目录新建.htaccess文件，写入以下配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

配置前需要确认两个前提：

• Apache已开启mod_rewrite扩展
• 站点配置中的AllowOverride参数设置为All，否则.htaccess不会生效

如果你的React项目不是部署在域名根目录，而是子目录，把上面配置里的/改成对应的子目录路径即可。 #

2. 解决根路径带查询参数仍触发重定向的问题 #

react-router的路径匹配默认只校验URL的路径部分，不包含查询参数，所以localhost?m=m仍然会命中path="/"的规则。你可以在render逻辑中增加查询参数判断，只要存在自定义查询参数就不执行重定向，以react-router v5为例修改代码如下：

import { useLocation } from 'react-router-dom';

// 组件内获取URL参数
const location = useLocation();
// 只要有查询参数就判定为不需要重定向
const hasCustomQuery = location.search !== '';
// 也可以做更精准的判断：const hasCustomQuery = new URLSearchParams(location.search).has('m')

{HaveToken && !hasCustomQuery ? (
  <BrowserRouter>
    <Route exact path="/" render={() => {
      window.location.href="tv/indextv.html?m="+auth.currentUser.email+"&p="+othermail+"&t="+othertoken
    }} />
  </BrowserRouter>
):null}

3. 区分是否从外部站点跳转的实现方案 #

两种可选方案按需选择即可：

• 方案1：跳转带自定义标记参数
  原生HTML页面跳转时增加来源标记参数：

  window.location.href = 'http://你的域名/messages?from=outer';
  

  React中拿到这个参数后存入sessionStorage全局生效，只要存在这个标记就跳过根路径重定向逻辑。
• 方案2：通过referrer判断来源
  无需修改原生跳转代码，直接在React的重定向逻辑前判断即可：

  // 替换成你自己的原生站点域名
  const isFromOuter = document.referrer.includes('your-domain.com');
  

  把这个判断加入重定向前置条件，符合要求就跳过重定向。

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