如何使用react-router-dom重定向到含子域名的绝对URL？

需求场景 #

现有实现（前4种场景） #

你已实现前4种场景的代码如下：

var
    url = window.location.href,
    subdomin = window.location.host.split("."),
    pathName = useLocation().pathname;

if( pathName.match(/((fa)|(en)|(ar)\/)?((login)|(panel))/) ){
  return(
    <Routes>
      <Route path="login" element={<Navigate replace to="/en/login" />} />
      <Route path="panel" element={<Navigate replace to="/en/panel" />} />
      <Route path="/:lang">
          <Route path="login" element={<Panel />} />
          <Route path="panel" element={<Panel />} />
      </Route>
    </Routes>
  )
}

优化与完整实现方案 #

以下是覆盖所有8种场景的优化方案，通过提取关键信息、统一路由配置实现更清晰的逻辑：

1. 工具函数提取 #

先封装两个工具函数，用于提取子域名和路径中的语言参数：

// 获取当前域名的子域名
const getSubdomain = () => {
  const hostParts = window.location.host.split('.');
  // 处理localhost带端口的情况，比如localhost:3000
  if (hostParts[0] === 'localhost') return '';
  // 提取非基础域名的子部分
  if (hostParts.length > 2) return hostParts[0];
  return '';
};

// 从路径中提取语言参数，默认返回'en'
const getLangFromPath = (pathname) => {
  const pathParts = pathname.split('/').filter(Boolean);
  const validLangs = ['fa', 'en', 'ar'];
  if (pathParts.length > 0 && validLangs.includes(pathParts[0])) {
    return pathParts[0];
  }
  return 'en';
};

2. 完整路由逻辑实现 #

整合所有场景的判断与重定向，同时优化前4种场景的路由逻辑：

import { Routes, Route, Navigate, useLocation } from 'react-router-dom';

const AppRoutes = () => {
  const location = useLocation();
  const pathname = location.pathname;
  const currentSubdomain = getSubdomain();
  const currentLang = getLangFromPath(pathname);
  
  // 固定配置项
  const HOLDING_SUBDOMAIN = 'holding';
  const BLOG_SUBDOMAIN = 'sameSubDomain';
  const BASE_DOMAIN = window.location.host.split('.').slice(-2).join('.');

  return (
    <Routes>
      {/* 场景1-4：处理panel/login相关路径 */}
      {/* 无语言前缀的路径重定向到en前缀 */}
      <Route path="/login" element={<Navigate replace to="/en/login" />} />
      <Route path="/panel" element={<Navigate replace to="/en/panel" />} />
      {/* 带语言前缀的路径直接渲染Panel组件 */}
      <Route path="/:lang/login" element={<Panel />} />
      <Route path="/:lang/panel" element={<Panel />} />

      {/* 场景5-6：主域名（无子域名）的根路径/带语言根路径 */}
      <Route path="/" element={
        currentSubdomain === '' ? (
          <Navigate replace to={`https://${HOLDING_SUBDOMAIN}.${BASE_DOMAIN}/en`} />
        ) : null
      } />
      <Route path="/:lang" element={
        currentSubdomain === '' ? (
          <Navigate replace to={`https://${HOLDING_SUBDOMAIN}.${BASE_DOMAIN}/${currentLang}`} />
        ) : null
      } />

      {/* 场景7-8：自定义子域名的根路径/带语言根路径 */}
      <Route path="/" element={
        currentSubdomain !== '' && currentSubdomain !== HOLDING_SUBDOMAIN ? (
          <Navigate replace to={`https://${BLOG_SUBDOMAIN}.${BASE_DOMAIN}/en`} />
        ) : null
      } />
      <Route path="/:lang" element={
        currentSubdomain !== '' && currentSubdomain !== HOLDING_SUBDOMAIN ? (
          <Navigate replace to={`https://${BLOG_SUBDOMAIN}.${BASE_DOMAIN}/${currentLang}`} />
        ) : null
      } />

      {/* 跨子域名跳转后的组件渲染 */}
      <Route path="*" element={
        currentSubdomain === HOLDING_SUBDOMAIN ? (
          <HoldingPage />
        ) : currentSubdomain === BLOG_SUBDOMAIN ? (
          <BlogPage />
        ) : null
      } />
    </Routes>
  );
};

export default AppRoutes;

方案说明 #

• 逻辑复用：将子域名、语言参数提取封装为工具函数，减少冗余代码，提升可维护性
• 路由拆分：按场景拆分路由规则，每个规则对应明确的业务场景，便于后续修改
• 跨域处理：通过拼接完整URL实现跨子域名跳转，需确保目标子域名已完成部署且支持跨域访问（若为同一项目部署）
• 组件渲染：根据当前子域名判断渲染对应组件，若为跨子域名独立部署，可在对应子域名项目中单独配置组件路由

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