使用React Router时如何加载独立vanilla javascript页面？

核心逻辑 #

你当前的配置将域名下所有请求默认转发到React应用的入口index.html，要实现需求只需调整服务端路由规则优先级，让/differentPageEntirely路径优先匹配到原生JS静态页面，其余路径继续走React的fallback规则即可。

不同部署环境的具体操作 #

• Nginx 部署场景 #

  找到Nginx站点配置文件，在原有匹配/*转发React的规则之前，新增针对目标路径的匹配规则：

  # 新增规则放在React全局匹配规则的前面
  location /differentPageEntirely {
      # 填写原生JS页面的实际存放目录
      root /var/www/vanilla-page-root;
      # 入口文件可根据实际文件名修改
      index index.html;
      # 如果页面未放在root下的differentPageEntirely目录，可使用alias指定路径
      # alias /var/www/vanilla-page/;
  }
  
  # 保留原有的React全局匹配规则即可
  location / {
      root /var/www/react-app-root;
      try_files $uri $uri/ /index.html;
  }
  

  修改后执行nginx -s reload重载配置即可生效。

• Apache 部署场景 #

  编辑React应用根目录下的.htaccess文件，在原有React路由重写规则之前新增以下规则：

  RewriteEngine On
  # 标记目标路径不进入React重写规则
  RewriteRule ^differentPageEntirely($|/) - [L]
  
  # 保留原有的React路由重写规则即可
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• 静态托管平台部署场景 #

  • Vercel环境：在项目根目录新增vercel.json文件，添加如下配置：

    {
      "rewrites": [
        { "source": "/differentPageEntirely", "destination": "/你的原生页面实际路径.html" },
        { "source": "/(.*)", "destination": "/index.html" }
      ]
    }
    

  • Netlify环境：在项目根目录新增_redirects文件，添加如下配置：

    /differentPageEntirely /你的原生页面实际路径.html 200
    /* /index.html 200
    

注意事项 #

如果你的React应用使用了React Router等客户端路由库，不要在React路由规则中定义/differentPageEntirely同名路由，避免客户端内跳转时被React路由拦截。

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