react多入口配置如何设置路由

配置多入口路由的基本思路

React多入口应用通常指一个项目中包含多个独立的SPA（单页应用），每个入口有独立的路由系统。核心是通过Webpack配置多个入口文件，并结合路由的动态加载实现隔离。

Webpack多入口配置

在webpack.config.js中指定多个入口点，每个入口对应一个独立的React应用：

module.exports = {
  entry: {
    app1: './src/entries/app1.js',
    app2: './src/entries/app2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
}

路由隔离方案

每个入口文件应初始化独立的路由实例。以React Router v6为例：

// src/entries/app1.js
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App1Layout from '../layouts/App1';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App1Layout />,
    children: [
      { path: "dashboard", element: <Dashboard /> }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('app1')).render(
  <RouterProvider router={router} />
);

动态路由加载优化

结合Webpack的代码分割功能，实现按需加载：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App1Layout />,
    children: [
      { 
        path: "settings",
        lazy: () => import('../pages/Settings')
      }
    ]
  }
]);

Nginx服务器配置示例

生产环境需配置服务器根据URL路径指向不同入口：

server {
  location /app1 {
    alias /path/to/dist;
    try_files $uri /app1/index.html;
  }

  location /app2 {
    alias /path/to/dist;
    try_files $uri /app2/index.html;
  }
}

开发环境路由处理

在开发服务器（如webpack-dev-server）中配置historyApiFallback：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /^\/app1/, to: '/app1/index.html' },
      { from: /^\/app2/, to: '/app2/index.html' }
    ]
  }
}

共享组件处理

对于需要跨入口共享的组件，建议将其放置在src/common目录并通过alias引入：

// webpack.config.js
resolve: {
  alias: {
    '@common': path.resolve(__dirname, 'src/common')
  }
}

TypeScript路径配置

若使用TypeScript，需同步配置tsconfig.json：

{
  "compilerOptions": {
    "paths": {
      "@common/*": ["./src/common/*"]
    }
  }
}