React Router V6 路由报错：Cannot GET {route} 求助

配置React路由时，点击Drug组件的链接跳转到/info/:rxcui路由，出现“Cannot GET {route}”错误。以下是相关代码及解决方向：

路由配置（App组件内） #

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={
            <RxNormProvider>
                <Search />
            </RxNormProvider>
        }>
            <Route path="/info/:rxcui" element={
                <RxNormProvider>
                    <Drug />
                </RxNormProvider>
            }/>
        </Route>
    )
);

Drug组件跳转代码 #

<Link to={`/info/${drug.rxcui}`}>
...
</Link>

Webpack配置 #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: path.resolve(__dirname, '..', './src/index.tsx'),
    mode: "development",
    devtool: "cheap-module-source-map",
    devServer: {
        port: 3000,
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, '..', './build'),
        filename: '[name].[chunkhash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "..", "./public/index.html")
        }),
        new MiniCssExtractPlugin(),
        new WebpackDev.DefinePlugin({
            'process.env.name': JSON.stringify('dev')
        }),
    ],
};

编辑补充：启动命令为：

"start": "webpack serve --config webpack/webpack.config.ts --env env=development --open"

问题原因及解决方法 #

1. 核心问题：createBrowserRouter基于HTML5 History API实现前端路由，当直接访问子路由（如/info/123）或刷新页面时，Webpack Dev Server会尝试请求对应路径的文件，但SPA的路由逻辑由前端处理，服务器不存在该文件，因此返回404错误。

2. 解决方案：在Webpack的devServer配置中添加historyApiFallback: true，让Dev Server在找不到对应文件时返回index.html，交由前端路由接管：

devServer: {
    port: 3000,
    historyApiFallback: true // 新增该行配置
},

3. 额外优化：父路由已包裹RxNormProvider，子路由无需重复包裹，可简化路由配置：

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={
            <RxNormProvider>
                <Search />
            </RxNormProvider>
        }>
            <Route path="/info/:rxcui" element={<Drug />}/>
        </Route>
    )
);

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