How to import two different components based on hostname for same pathname in react using react-router

Question

Let's take an example

Hostname 1: www.abc.com
Hostname 2: www.xyz.com

HomePageContainer1: abcHomePage
HomePageContainer2: xyzHomePage

but routes exists in single application

    path: '/',
    component: Loadable({
      loader: () =>
        import('/containers/HomePageContainer/HomePageContainer'),
    }),
    chunk: 'Home',
    title: '',
  }

so if someone hits www.abc.com should load HomePageContainer1 else should load HomePageContainer2.

score 0 · Answer 1 · answered Nov 19 '19 at 14:09

You'd want to check the url and return the correct landingpage from the component that handles routing (in my case this would be index.js), like so:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from "react-router-dom";
import AbcHomePage from './Authenticate';
import XyzHomePage from './XyzHomePage';

const urlIsAbc = window.location.hostname === "abc";
const homePageToRender = urlIsAbc ? AbcHomePage : XyzHomePage;

ReactDOM.render(
    <>
        <Router>
            <Route path="/myPath" component={homePageToRender}/>
        </Router>
    </>
    , document.getElementById('root')
);

[...]

Using the `History` object you should be able to find out the current url. https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4 — jasper, Nov 20 '19 at 10:46

How to import two different components based on hostname for same pathname in react using react-router

1 Answers1