多入口create-react-app-rewired应用URL参数无法解析问题咨询

Hey there, let's work through this URL parameter parsing problem you're hitting with your multi-page React setup. Based on the config snippets you shared, here are the most likely causes and actionable fixes:

1. First: Complete Your HtmlWebpackPlugin Config #

Looking at your code, you only have an HtmlWebpackPlugin instance for the index chunk—but each entry point (like appPage1, appPage2) needs its own plugin instance to generate a corresponding HTML file. If you skip this, your secondary pages might load incorrect resources or fail to initialize properly, which can break URL parameter access.

Update your config-overrides.js to add plugins for all entries:

// config-overrides.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function override(config, env) {
  // Your existing entry config
  config.entry = {
    index: [
      config.entry[0],
      paths.appSrc + '/entryPoints/somePath1/AppPage1.tsx'
    ],
    appPage1: [
      config.entry[0],
      paths.appSrc + '/entryPoints/somePath1/AppPage1.tsx'
    ],
    appPage2: [
      config.entry[0],
      paths.appSrc + '/entryPoints/somePath2/AppPage2.tsx'
    ]
  };

  // Replace or extend the plugins array with per-entry HTML plugins
  config.plugins = [
    ...config.plugins.filter(plugin => !(plugin instanceof HtmlWebpackPlugin)), // Remove default plugin
    new HtmlWebpackPlugin({
      hash: true,
      template: paths.appHtml,
      chunks: ['index'],
      filename: 'index.html' // Explicit output filename
    }),
    new HtmlWebpackPlugin({
      hash: true,
      template: paths.appHtml,
      chunks: ['appPage1'],
      filename: 'appPage1.html' // Matches appPage1 entry
    }),
    new HtmlWebpackPlugin({
      hash: true,
      template: paths.appHtml,
      chunks: ['appPage2'],
      filename: 'appPage2.html' // Matches appPage2 entry
    })
  ];

  return config;
};

2. Correctly Parse URL Parameters in Your Components #

If your components aren't picking up URL params, make sure you're using standard browser APIs or a routing library correctly.

Option A: Vanilla Browser API (No Routing Library) #

Use URLSearchParams directly to extract parameters from window.location.search:

// AppPage1.tsx
import { useEffect, useState } from 'react';

function AppPage1() {
  const [params, setParams] = useState<Record<string, string | null>>({});

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const parsedParams = Object.fromEntries(searchParams.entries());
    setParams(parsedParams);
  }, []);

  return (
    <div>
      <p>Param 1: {params.param1}</p>
      <p>Param 2: {params.param2}</p>
    </div>
  );
}

export default AppPage1;

Option B: Using React Router (For Page-Specific Routing) #

If you're using react-router-dom, note that multi-page apps work best with HashRouter (avoids needing backend config for clean URLs). Each entry point should wrap its own router:

// AppPage1.tsx
import { HashRouter as Router, Routes, Route, useSearchParams } from 'react-router-dom';

function PageContent() {
  // Use react-router's useSearchParams hook
  const [searchParams] = useSearchParams();
  const param1 = searchParams.get('param1');

  return <div>Param 1 from router: {param1}</div>;
}

function AppPage1() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<PageContent />} />
      </Routes>
    </Router>
  );
}

export default AppPage1;

3. Verify Webpack Output Config #

Ensure your webpack output is set up to correctly bundle each entry's assets. Add this to your config-overrides.js if missing:

config.output = {
  ...config.output,
  filename: 'static/js/[name].[contenthash:8].js', // Unique filename per entry
  chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
};

4. Check for Template Interference #

Double-check your public/index.html (the paths.appHtml template) for any custom scripts that might modify window.location or interfere with URL parsing. Remove or adjust any code that could override or clear the search parameters.

内容的提问来源于stack exchange，提问作者Satish