如何支持两个不同子域的ReactJS应用程序

要支持两个不同子域的ReactJS应用程序，你可以使用React Router库和HTTP代理来实现。

以下是一个解决方法，包含代码示例：

Step 1: 安装React Router和HTTP代理库

在项目根目录下运行以下命令来安装所需的库：

npm install react-router-dom http-proxy-middleware --save

Step 2: 创建两个React应用

创建两个React应用，分别存放在不同的子域下。假设一个应用存放在子域1.example.com，另一个应用存放在子域2.example.com。

Step 3: 配置React Router

在每个应用的根组件中，使用React Router来配置路由。

// App1.js (位于子域1.example.com)
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App1 = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
    <p>Welcome to App1!</p>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
    <p>This is App1's About page.</p>
  </div>
);

export default App1;

// App2.js (位于子域2.example.com)
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App2 = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
    <p>Welcome to App2!</p>
  </div>
);

const Contact = () => (
  <div>
    <h2>Contact</h2>
    <p>This is App2's Contact page.</p>
  </div>
);

export default App2;

Step 4: 配置HTTP代理

在应用的根目录下创建一个名为setupProxy.js的文件，并添加以下代码：

// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api.example.com',
      changeOrigin: true,
    })
  );
};

这将配置一个代理，将所有以/api开头的请求转发到http://api.example.com。

Step 5: 运行应用程序

在每个应用程序的根目录下运行以下命令来启动开发服务器：

npm start

这将运行开发服务器，并将应用程序分别部署到各自的子域。

现在，你可以通过访问http://subdomain1.example.com和http://subdomain2.example.com来访问两个不同子域的React应用程序。同时，任何以/api开头的请求都将被代理到http://api.example.com。

希望这可以帮助到你！