如何使用react路由器为react中的相同路径名导入基于主机名的两个不同组件

Question

让我们以为例

主机名1:www.abc.com
主机名2:www.xyz.com

主页内容1:abc主页
主页内容2:xyz主页

但是路由存在于单个应用中

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

因此，如果有人点击www.abc.com应该加载HomePageContainer1，其他人应该加载HomePageContainer2。

Answer 1

您需要检查url并从处理路由的组件返回正确的landingpage(在我的情况下，这将是index.js(，如下所示：

// 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')
);
[...]