对不同的子域做出反应答案

【问题标题】：React on different subdomains对不同的子域做出反应
【发布时间】：2022-01-25 22:51:06
【问题描述】：

我的 FTP 上有一个文件夹，其中包含 /myapp 中的 React / Nextjs 应用程序。我的网址 my.app 指向该文件夹。是否可以添加指向同一文件夹 /myapp 的不同子域（例如 user1.my.app 和 user2.my.app）。应用检测子域，可以根据子域设置不同的状态吗？

【问题讨论】：

React 与域完全无关。我想，您的问题与托管配置有关。所以，我猜这取决于你使用的特定网络服务器。
这不是真的。 react-router-dom 与 URL 有关，我希望 React 根据 url 采取不同的行动。我不知道服务器配置是否能解决我的问题。
URL 由不同的部分组成。 <protocol>://<server-name>:<port>/<path>?<query-string>。域是第一部分，它与网页本身和任何路由器无关。 SPA 路由器使用 URL 的 <path> 部分。
当 SPA 路由器已经加载时，它会在浏览器页面中工作。但是您是说不同的域应该指向同一个文件夹。这是一个网络服务器工作。
这个设置很简单。我的问题旨在反应如何检测域（子域）并根据该值做一些事情

标签： reactjs routes next.js subdomain

【解决方案1】：

React 与域完全无关。我想，您的问题与托管配置有关。因此，这取决于您使用的特定 Web 服务器。

网址

URL 由不同的部分组成：<scheme>://<user-info>@<subdomain>.<domain>:<port>/<path>?<query-string>#<hash>。

OmenBreeze 制作的图表 - 自己的作品，CC BY-SA 4.0，
https://commons.wikimedia.org/w/index.php?curid=82827943

反应路由器

域与网页本身和网页上的路由器无关。 SPA 路由器适用于 URL 的 <path>、<query-string> 和 <hash>（也称为 <fragment>）部分。

location

位置代表应用程序现在的位置、您希望它去哪里，甚至是它曾经的位置。它看起来像这样：
{
  "key": "ac3df4", // not with HashHistory!
  "pathname": "/somewhere",
  "search": "?some=search-string",
  "hash": "#howdy",
  "state": undefined
}
React Router Docs: Web > API > location

SPA 路由器在已加载时在浏览器页面中工作。但是您是说不同的域应该指向同一个文件夹。这是一个 Web 服务器作业。

Apache （作为 Web 服务器示例）

在 Apache Web 服务器中，您可以配置两个不同的虚拟主机指向同一个目录：

<VirtualHost *:80>
    DocumentRoot "/myapp"
    ServerName user1.my.app
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/myapp"
    ServerName user2.my.app
</VirtualHost>

https://httpd.apache.org/docs/2.4/vhosts/examples.html

❗ 你在 cmets 中说：

我的问题旨在反应如何检测域（子域）并根据该值做一些事情。

无论如何，这不完全是一个 React 问题。它可以用纯 JavaScript 来解决。

✅ 在 JavaScript 中获取当前域并在 React 中使用它

如果想知道JavaScript中当前浏览器地址中的域是什么，需要使用document.location。

document.location.hostname 包含来自地址 URL 的完整域名。

Location

Location 接口表示它所链接的对象的位置（URL）。对其所做的更改会反映在与之相关的对象上。 Document 和Window 接口都有这样一个链接的Location，分别可以通过Document.location 和Window.location 访问。

Location.hostname

是一个包含 URL 域的 USVString。

MDN: Web technology for developers > Web APIs > Location

在 React 中，您可以在其构造函数的根 App 组件中执行此操作。

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.hostname = document.location.hostname;
    console.log(this.hostname);
  }
}

【讨论】：