基于URL的主机名路由React组件

Question

我想加载基于主机名的React组件，例如，假设我们有React应用程序'Frontend'和URL访问这个应用程序是<base_url>/test/login或<base_url>/test/home。现在我想从两个不同的主机名访问这个应用程序。

1. test.abc.com/test/login , test.abc.com/test/home
2. test.xyz.com/test/login , test.xyz.com/test/home

现在，如果用户使用#1，那么它将显示test.abc.com的登录/home/logout页面，而#2的登录/home/logout页面是不同的。基本上，我需要根据主机名定制UI。

谁能告诉我，我怎么才能实现这个场景，或者有其他的方法来做到这一点?

Answer 1

1. 测试location.hostname的值
2. 根据
选择组件
3. 传递给你的路由
例如:

import { ABCLogin, XYZLogin } from "./LoginComponents";
const Login = location.hostname === "test.abc.com" ? ABCLogin : XYZLogin;
const App = () => {
/* ... */
<Route path="login" element={<Login />}>
/* ... */
}

---

来自另一个答案的评论:

如果应用程序从100个主机名运行，并且login/home/logut和其他主机名不同，那么在这种情况下这种方法是否也适用?

从2(如问题中所述)到100有点像门柱移动，但是…

由于包含100个不同的Login组件会使应用程序膨胀，所以我将在构建时进行选择。具体取决于你使用哪个工具链来构建生产应用程序。

例如，如果你正在使用Webpack，你可以这样做:

resolve: {  
alias: {
components: path.resolve(__dirname, 'src/components/'),
'components/Login': path.resolve(__dirname, `src/components/${process.env.TARGETHOSTNAME}Login`)
}
}

这将要求您在构建之前设置TARGETHOSTNAME环境变量。

Answer 2

使用window.location.hostname和useEffect来实现期望的行为。基本上检查url在useEffect和重定向使用ReactRouterDOM库或类似的东西。

Answer 3

使用javascript函数location.hostname;获取主机名如果主机名是test.abc.com，重定向到test.abc.com/logout，否则重定向到test.xyz.com/logout

Answer 4

使用window.location.hostname获取主机名并在'.'处分割

const subdomain = window.location.hostname.split('.')[1]
if(subdomain === "abc") {
// ... do something
} else {
// ... do something
}