我想加载基于主机名的React组件,例如,假设我们有React应用程序'Frontend'和URL访问这个应用程序是<base_url>/test/login
或<base_url>/test/home
。现在我想从两个不同的主机名访问这个应用程序。
test.abc.com/test/login , test.abc.com/test/home
test.xyz.com/test/login , test.xyz.com/test/home
现在,如果用户使用#1,那么它将显示test.abc.com
的登录/home/logout页面,而#2的登录/home/logout页面是不同的。基本上,我需要根据主机名定制UI。
谁能告诉我,我怎么才能实现这个场景,或者有其他的方法来做到这一点?
- 测试
location.hostname
的值 - 根据 选择组件
- 传递给你的路由 例如:
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
环境变量。
使用window.location.hostname
和useEffect
来实现期望的行为。基本上检查url在useEffect
和重定向使用ReactRouterDOM库或类似的东西。
使用javascript函数location.hostname;
获取主机名如果主机名是test.abc.com,重定向到test.abc.com/logout,否则重定向到test.xyz.com/logout
使用window.location.hostname
获取主机名并在'.'处分割
const subdomain = window.location.hostname.split('.')[1]
if(subdomain === "abc") {
// ... do something
} else {
// ... do something
}