目前，我有一个react应用程序，加上typescript和react-router dom。
我设置了一个breadcrumbs.tsx文件，如下所示

import { Link, useLocation } from 'react-router-dom';
export default function Breadcrumbs() {
    const location = useLocation();
    let currentLink = '';
    return (
        <ul >
            {location.pathname !== "/" ? (<li>
                <Link to="/">Home</Link>
            </li>) : (
                <li>
                    <span>Home</span>
                </li>)
            }
            {location.pathname
                .split('/')
                .filter(crumb => crumb !== "")
                .map(crumb => {
                    currentLink += `/${crumb}`;
                    return (
                        <li key={currentLink} >
                            {"\t>>\t"}
                            {location.pathname !== currentLink ? (
                                <Link to={currentLink}>{crumb}</Link>)
                                : (
                                    <span >{crumb}</span>
                                )
                            }
                        </li>
                    );
                })
            }
        </ul>
    );
}

我的App.tsx是这样的：

import Home from './Home';
import Test1 from './test1';
import Test from './test';
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/test" element={<Test />} />
      <Route path="/test/1" element={<Test1 />} />
    </Routes>
  );
}

Home.tsx是：

import { Link } from 'react-router-dom';
export default function Home() {
    return (
        <div>
            <p>Home</p>
            <div><Link to="/test">test</Link></div>
            <div><Link to="/test/1">test 1</Link></div>
        </div>
    )
}

Test.tsx是：

import { Link } from "react-router-dom";
import Breadcrumbs from "./breadcrumbs";
export default function Test() {
    return (
        <div>
            Test
            <Breadcrumbs />
            <div><Link to="/">Home</Link></div>
            <div><Link to="/test/1">test 1</Link></div>
        </div>
    )
}

Test1.tsx与上面相同，只是名称为Test 1，第二个链接指向/test页面。
我的webpack.common.js构建文件是（注意：使用scss、graphql的其他代码未示出）：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/', // change to CDN in webpack.prod.js,
        assetModuleFilename: 'assets/images/[hash][ext][query]'
    },
    target: 'web',
    optimization: { // only runs in production
        minimizer: [
            `...`, // terserplugin
            new CssMinimizerPlugin()
        ]
    },
    node: {
        __dirname: true
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            // Component / Page CSS
            {
                test: /\.module.scss$/,
                exclude: /^(?!(.*)module.scss$).*\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: {
                                localIdentName: '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true
                        }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.s?css$/,
                exclude: /\.module.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                type: 'asset/resource'
            }
        ]
    },
    resolve: {
        extensions: [
            ".js",
            ".jsx",
            ".tsx",
            ".ts",
            ".scss"
        ],
        mainFields: [
            'browser',
            'main',
            'module'
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [{ from: 'public/index.html', to: 'index.html' }]
        }),
        new MiniCssExtractPlugin()
    ]
};

而prod还具有mode: 'production', stats: "errors-only"。
index.html文件是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>App</title>
    
    <meta name="Author" content="author" />
    <meta name="Description" content="desc" />
    <meta name="Keywords" content="keyword" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <script defer="defer" src="main.js"></script>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我运行上面显示的webpack文件构建的应用程序时，我试图直接路由到localhost:8080/test/1（不使用按钮），它会抛出这个错误：

红线上写着：

我理解这个问题是因为main.js和main.css文件正在dist文件夹中构建，但html文件正在根目录的/test/文件夹中查找它们。
我该如何解决此问题？
注意：使用create-react-app my-app --template typescript沿着与react-router-dom具有相同的设置，构建它，并使用serve -s build，在路由/test/1中的html文件仍然有js和css文件在/static/文件夹中，无论你在什么路由。我该怎么做？
任何帮助都是感激不尽的。