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

IT技术 reactjs react-router subdomain slack dvajs
2021-05-02 09:15:07

我正在尝试实现像 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渲染react组件。

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'));
}