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

Question

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/.

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

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.

Answer 1

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