路由基于从URL的主机名的REACT REACT组件

发布于 2025-02-13 05:18:28 字数 501 浏览 0 评论 0原文

我想根据主机名加载React组件，例如，假设我们有React Application“ Frontend”和URL访问此应用程序是＆lt; base_url＆gt;/test/test/login 或＆lt; base_url＆gt;/test/home。现在，我想从2个不同的主机名访问此应用。

test.abc.com/test/login，test.abc.com/test/home
test.xyz.com/test/login，test.xyz.com/test/home

现在，如果用户使用＃1，则仅显示test.abc.com的登录/主页/注销页面，并且对于＃2登录/home/home/logout页面不同。基本上，我需要自定义基于UI的O主机名。

谁能告诉我，我该如何实现这种情况，或者还有其他方法可以做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空宴 2025-02-20 05:18:29

使用window.location.hostname获取主机名并在'中拆分。

const subdomain = window.location.hostname.split('.')[1]

if(subdomain === "abc") {
  // ... do something
} else {
  // ... do something
}

Use window.location.hostname to get the hostname and split at '.'

const subdomain = window.location.hostname.split('.')[1]

if(subdomain === "abc") {
  // ... do something
} else {
  // ... do something
}

回复收藏 0 原文

骑趴 2025-02-20 05:18:28

值
基于该组件
。

测试location.hostname

import { ABCLogin, XYZLogin } from "./LoginComponents";
const Login = location.hostname === "test.abc.com" ? ABCLogin : XYZLogin;

const App = () => {
    /* ... */
    <Route path="login" element={<Login />}>
    /* ... */
}

的

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

从2（如问题中指定）到100是门柱移动，但是……

由于包括100个不同的登录组件会膨胀应用程序，因此我会在构建时间进行选择。细节将取决于您使用哪种工具链来构建生产应用程序。

例如，如果您使用的是WebPack，则可以执行类似的操作：

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

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

Test the value of location.hostname
Select your component based on that
Pass it to your route

For example:

import { ABCLogin, XYZLogin } from "./LoginComponents";
const Login = location.hostname === "test.abc.com" ? ABCLogin : XYZLogin;

const App = () => {
    /* ... */
    <Route path="login" element={<Login />}>
    /* ... */
}

From a comment on another answer:

If the app is running from 100 hostnames and the login/home/logut and others are different based on host name , then in this case whether this approach is applicable too?

Going from 2 (as specified in the question) to 100 is something of a goalpost move, but…

Since including 100 different Login components would bloat the application, I would do the selection at build time. The specifics would depend on which toolchain you were using to build your production app.

For example, if you were using Webpack you could do something like:

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

This would require that you set the TARGETHOSTNAME environment variable before building.

回复收藏 0 原文