React Router V6：无法获取路由

Question

我正在尝试设置一些基本路由，但是当我尝试导航到我的

Drug

链接时，我收到“无法获取 {route}”。我不确定为什么会发生这种情况，如果有人能解释我应该采取哪些不同的做法，我将不胜感激。

// Router inside of App component

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

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

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')
        }),
    ],
};

编辑#1：添加了 webpack 配置。我使用以下命令提供此应用程序：

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

env

表示我们要部署到哪个环境，但我没有将其包含到代码中，因为我认为它与问题无关。

Answer 1

事实证明，使用

Routes

并取消嵌套 2 个

Route

元素解决了这个问题。

我必须研究嵌套路由，但现在，感谢那些做出贡献的人。