React JS中基于域名URL切换登录页面的实现求助

你可以通过动态判断当前访问域名，来渲染对应的首页组件，具体实现步骤如下：

1. 创建动态首页组件 #

新建一个DynamicHome.js文件，用来根据域名切换Login和SignIn组件：

import Login from './Login'; // 替换成你的Login组件实际路径
import SignIn from './SignIn'; // 替换成你的SignIn组件实际路径

const DynamicHome = () => {
  // 获取当前页面的域名
  const currentDomain = window.location.hostname;

  // 根据域名匹配对应组件
  if (currentDomain === 'test.***.com') {
    return <Login />;
  } else if (currentDomain === 'alpha.***.com') {
    return <SignIn />;
  }

  // 域名不匹配时的默认 fallback，这里用原来的Login组件
  return <Login />;
};

export default DynamicHome;

如果后续需要支持更多域名，推荐用对象映射的方式简化代码：

import Login from './Login';
import SignIn from './SignIn';

const domainComponentMap = {
  'test.***.com': Login,
  'alpha.***.com': SignIn,
  // 可添加更多域名-组件映射
};

const DynamicHome = () => {
  const currentDomain = window.location.hostname;
  // 找不到对应域名时，默认使用Login组件
  const TargetComponent = domainComponentMap[currentDomain] || Login;
  return <TargetComponent />;
};

export default DynamicHome;

2. 修改路由配置 #

把原来根路径/的element替换成刚创建的DynamicHome组件：

import DynamicHome from './DynamicHome'; // 替换成你的DynamicHome组件实际路径

<Routes>
  {/* 根路径使用动态组件实现域名切换 */}
  <Route exact path="/" element={<DynamicHome />} />
  <Route exact path="/home" element={<Home />} />
  <Route exact path="/login" element={<Login />} />
  <Route exact path="/login2" element={<Login_2 />} />
  <Route exact path="/signin" element={<SignIn />} />
  <Route exact path="/register" element={<Register />} />
  <Route exact path="/profile" element={<Profile />} />
  <Route path="/user" element={<BoardUser />} />
  <Route path="/mod" element={<BoardModerator />} />
  <Route path="/admin" element={<BoardAdmin />} />
</Routes>

注意事项 #

• 域名匹配是严格相等的，要确保字符串和实际访问的域名完全一致（比如不要遗漏www或大小写错误）
• 本地测试时，可以修改系统hosts文件，将test.***.com和alpha.***.com指向127.0.0.1，模拟不同域名的访问场景

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