React Router V6: Cannot GET route

Question

I'm attempting to set up some basic routing but when I attempt to navigate to my Drug link, I get a "Cannot GET {route}". I'm unsure as to why this occurs, and I'd appreciate if anyone could explain what I should be doing differently.

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

EDIT #1: Added webpack configuration. I serve this application using the following command:

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

env denotes which environment we are deploying into, but I have not included it into the code because I don't think it relates to the problem.

Answer 1

As it turns out, using Routes and un-nesting the 2 Route elements solved the issue.

I'll have to research nested routing but for now, thank you to those who contributed.