React-router Subdomain Routing

I'm building a site using react and react-router. My site is split into two sections: front and partners section. I want the partners section to be accessed using a subdomain partn

Solution 1:

I don't use react-router, but the following should work if you just add react router jsx to the individual application components

importReactfrom'react';

import {MainApplication} from'./Main';

functionsubdomainApplications (map) {
  let main = map.find((item)=> item.main);
  if (!main) {
    thrownewError('Must set main flag to true on at least one subdomain app');
  }

  returnfunctiongetComponent () {
    const parts = window.location.hostname.split('.');

    let last_index = -2;
    const last = parts[parts.length - 1];
    const is_localhost = last === 'localhost';
    if (is_localhost) {
      last_index = -1;
    }

    const subdomain = parts.slice(0, last_index).join('.');

    if (!subdomain) {
      return main.application;
    }

    const app = map.find(({subdomains})=> subdomains.includes(subdomain));
    if (app) {
      return app.application;
    } else {
      return main.application;
    }
  }
}

const getApp = subdomainApplications([
  {
    subdomains: ['www'],
    application: function () {
      return'Main!'
    }
    main: true
  },
  {
    subdomains: ['foo'],
    application: function () {
      return'Foo!';
    }
  },
  {
    subdomains: ['bar', 'baz.bar'],
    application: function () {
      return'Bar!';
    }
  }
]);

exportdefaultfunctionApplication () {
  constApp = getApp();
  return (
    <AppclassName="Application" />
  );
}

Solution 2:

It's a good practice to treat primary domain code and sub domain code as different codebases. Also as you are aware and react-router is a client side module. Although this hack might work, it's generally frowned upon.