像 slack 那样创建一个子域，例如: https://someteam.slack.com/ 在REACT JS中

Question

我正在尝试实现像 slack 在 react 中所做的那样的功能。大家都知道，在登录 Slack 之前， url 看起来像这样 https://www.slack.com/ ，但是一旦你登录它就会变成 https://www.team.slack.com/.

所以我的 React 项目有 2 种不同的布局（着陆布局和客户端仪表板）。我要找的是..

着陆布局应在 https://www.example.com/ 上运行一旦客户端成功登录，域就会更改为 https://www.clientname.example.com/ 并且管理布局会呈现。

需要帮助如何实现此 dynamic subdomain based 渲染反应组件。

Answer 1

首先，将所有请求重定向到index.html。之后就可以使用window.location.host了。只需解析此参数并根据解析的数据呈现您的组件。

const parsedData = window.location.host.split(".");

if(parsedData.length >= 3){
    const subDomain = parsedData[0];
    ReactDOM.render(<SubDomainApp subDomain={subDomain} />, document.getElementById('root'));
}else{
    ReactDOM.render(<MainApp />, document.getElementById('root'));
}

像 slack 那样创建一个子域，例如: https://someteam.slack.com/ 在REACT JS中

Create a subdomain like slack does e.g. : https://someteam.slack.com/ in REACT JS

reactjs

react-router

subdomain

slack

dvajs