创建一个像 slack 一样的子域，例如: https://someteam.slack.com/在 REACT JS [英] Create a subdomain like slack does e.g. : https://someteam.slack.com/ in REACT JS

问题描述

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

I am trying to implement feature like slack does in react. You all know before logged-in on Slack, the url looks like this https://www.slack.com/ , but once you logged in it change to https://www.team.slack.com/.

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

So i have my react project with 2 different layouts (landing layout & client dashboard). What i am looking for is..

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

Landing layout should runs on https://www.example.com/ and once client logged in successfully the domain get change into https://www.clientname.example.com/ and admin layout gets render.

需要帮助如何实现这个基于动态子域的渲染反应组件.

Need helps how to implement this dynamic subdomain based rendering react-components.

推荐答案

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

First of all, redirect all requests to index.html. After that, you can use window.location.host. Just parse this parameter and render your component regarding to parsed data.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！