React应用不同路由设置不同Favicon，如何避免双重部署？

不用搞两次部署，这几个方案就能解决问题：

• 前端动态切换Manifest文件
  PWA的主屏幕图标是靠manifest.json控制的，你可以在React里监听路由变化，动态替换页面中指向manifest的link标签。
  比如在App组件里用useLocation监听路由，当路径是/app/en时，把manifest的href换成英文版本的manifest-en.json，否则用默认的。代码大概是这样：

  import { useEffect, useLocation } from 'react';
  
  function App() {
    const location = useLocation();
  
    useEffect(() => {
      const isEnPath = location.pathname.startsWith('/app/en');
      const manifestLink = document.querySelector('link[rel="manifest"]');
      if (manifestLink) {
        manifestLink.href = isEnPath ? '/manifest-en.json' : '/manifest.json';
      }
    }, [location.pathname]);
  
    // 你的路由渲染逻辑
    return <div>{/* ... */}</div>;
  }
  

  只要在public文件夹里放两个manifest文件，各自配置对应的图标就行。注意有些浏览器会缓存manifest，必要时可以给文件名加版本号（比如manifest-en-v1.json）避免缓存问题。

• 服务器端根据请求返回对应Manifest
  如果你的部署有后端服务（比如Express），可以在服务器层面判断请求来源的路由，返回不同的manifest。比如当请求manifest的来源是/app/en路径时，返回英文版本的文件：

  const express = require('express');
  const path = require('path');
  const app = express();
  
  app.get('/manifest.json', (req, res) => {
    const isEnRoute = req.headers.referer?.includes('/app/en');
    const targetManifest = isEnRoute ? 'manifest-en.json' : 'manifest.json';
    res.sendFile(path.join(__dirname, 'public', targetManifest));
  });
  
  // 其他静态资源托管逻辑
  app.use(express.static('public'));
  

  这种方式不用改前端代码，靠服务器判断就行，不过要注意referer头在某些场景下可能不会被携带，要是担心这个，可以让前端在localStorage存当前路由标识，服务器通过Cookie读取，但稍微麻烦点。

• Service Worker拦截请求切换Manifest
  如果你的应用用了Service Worker，可以在SW里拦截manifest的请求，根据页面传递的路由信息返回对应文件。
  先在前端路由变化时给SW发消息：

  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.controller?.postMessage({
        type: 'ROUTE_CHANGE',
        path: location.pathname
      });
    }
  }, [location.pathname]);
  

  然后在Service Worker里接收消息并拦截请求：

  let currentPath = '/';
  
  self.addEventListener('message', (event) => {
    if (event.data.type === 'ROUTE_CHANGE') {
      currentPath = event.data.path;
    }
  });
  
  self.addEventListener('fetch', (event) => {
    if (event.request.url.endsWith('/manifest.json')) {
      const manifestUrl = currentPath.startsWith('/app/en') 
        ? '/manifest-en.json' 
        : '/manifest.json';
      event.respondWith(fetch(manifestUrl));
    }
  });
  

  这个方案适合已经用了SW的PWA，能更灵活地控制资源请求。

这三个方案都只需要一次部署，不用拆成两个应用，选哪个看你的技术栈和需求就行。

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