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

4.1k views Asked by At

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.

1

There are 1 answers

0
Berkay Yildiz On BEST ANSWER

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