根据用于到达那里的 URL 动态生成站点信息

Question

我目前在一家财务规划公司的合同网站上工作。

对于某些上下文：

该站点将允许他们的客户通过向 API 请求 Webinarjam.com

来注册公司每月的网络研讨会

客户端是一个使用 React 构建的非常简单的单页站点。它包括有关网络研讨会的信息、有关网络研讨会主持人的信息以及注册表格。

我有一个简单的代理服务器 (NodeJS(Express))，它向后端的 WebinarJam api 发出请求。与单个 table PostgreSQL 数据库一起保存与会者信息以供公司参考。（姓名、电子邮件、phone、参加的网络研讨会等）

网站已完全构建并准备好托管，因此我的问题。

我的问题

该网站将由公司的 5 位不同的演示者使用。他们每个人都希望拥有自己的 link 并能够将 link 发送给他们的特定客户。页面上的所有其他信息将保持不变（相同的网络研讨会，讨论的内容相同）只有演示者会改变。

所以我想知道是否有一种方法可以根据 link 在网站上动态呈现信息到了吗？

当网站首次呈现时，会使用网络研讨会的 ID 向 Webinarjam 的 API 请求有关特定网络研讨会的信息。这个 returns 一个对象，包含有关网络研讨会的所有信息，包括演示者信息。（网站上显示的所有信息都是根据此请求返回的数据动态呈现的）

那么从理论上讲，link 'john.webinar.com' 是否可以重新路由到 'webinar.com' 并且该站点会将 John 的信息呈现为演示者？

（我目前正在使用 Context API 进行全局状态管理，如果 Redux 适用于此类情况，我也很满意 table。）

Answer 1

Is there a way to dynamically render the info on a site based on the link that was used to get there?

是的，绝对！ react-router and qs 包可以使这更容易和更清晰，但这里有一种方法只使用 DOM 方法。

const query = new URLSearchParams(window.location.search);
const presenter = query.get("presenter");

如果 URL 不包含 presenter 变量，则 presenter 变量将是 URL 或 null 中的字符串。

export default function App() {
  const query = new URLSearchParams(window.location.search);
  const presenter = query.get("presenter");

  return (
    <div>
      {presenter ? (
        <h1>Presented By {presenter}</h1>
      ) : (
        <h1>All Presentations</h1>
      )}
    </div>
  );
}

如果您转到 mysite.com，那么它会呈现“所有演示文稿”，但是如果您转到 mysite.com/?presenter=John，那么它会呈现“由 John 呈现”。

可以使用 react-router-dom 设置像 mysite.com/john 这样的基于路径的 link。如果你想要一个像 john.mysite.com 这样的 subdomain 那么这需要在你的服务器上进行额外的配置（通过 .htaccess 或类似的）。

根据用于到达那里的 URL 动态生成站点信息

Dynamically generating site info based on the URL used to get there

hosting

dynamic

reactjs

redux

react-context

我的问题