React route to subdomain from 2nd level domain

Question

There is a login page on my React site which has this url (locally)

http://localhost:3000/login

When the user logs in, the server returns a bunch of information about the user including a list of companies, each of which has a subdomain element. All of this data gets put into localStorage upon logging in.

My goal here is that when a user logs into the site, they will get immediately redirected to the home page but with a subdomain matching the first company in their list of companies returned from the server.

This is what have so far:

1. This file is a global utility file which I will import into the login page:

const getSubdomainHref = function() {
    const storedUser = JSON.parse(localStorage.getItem("user") || '{}')
    let newHref = window.location.origin

    if (storedUser.companies.length > 0) {
        newHref = window.location.protocol + '//' + storedUser.companies[0].subdomain + '.' + window.location.host
    } 

    return newHref
}

export { getSubdomainHref };

2. And this is part of my login page (the important part)

import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { getSubdomainHref } from "./../utils";

//other code

  useEffect(() => {
    if (user.user_type !== 'anonymous') {
      let newHref = getSubdomainHref()
      navigate(newHref + "/");
    }
  }, [user, navigate]);

This is not working, What happens when I log in is this.

Initial page:

http://localhost:3000/login

Resulting page: (note, the subdomain returned is 'cbd')

http://localhost:3000/login/http://cbd.localhost:3000/

how can I make this work?

Note, as I write this, I just had another thought, that being the problem of the localStorage from "localhost" not being readily available at "cbd.localhost". I'm not sure if this is a problem yet but it might be.

Answer 1

The issue here is that the react-router-dom only handles the internal navigation. It means that it can only navigate or redirect to the URLs within the same react application i.e. http://localhost:3000. And that's why the subdomain is interpreted as an internal path and is appended to the current path.

If you need to navigate to an external URL you can use window.location object. You can either create a separate component for navigation or just directly use it as shown below :

import React, { useEffect } from 'react';
import { getSubdomainHref } from "./../utils";


  useEffect(() => {
    if (user.user_type !== 'anonymous') {
      let newHref = getSubdomainHref()
      window.location.href = newHref;
    }
  }, [user]);