React router с webpack - ошибка No routes matched location "/project_one/dist/index.html?_ijt=rokiefvj8cjmatb7g9en71lfgk&_ij_reload=RELOAD_ON_SAVE"

При отрисовки страницы в консоли выпадает такая ошибка - No routes matched location "/project_one/dist/index.html?_ijt=rokiefvj8cjmatb7g9en71lfgk&_ij_reload=RELOAD_ON_SAVE"

Webpack - 5 версии, react router - 6, еще подключен typescript

Пути все точно прописаны правильно

Страницы: App.js

import * as React from "react";
import {Routes, Route, BrowserRouter, Link} from "react-router-dom";
import DogPage from "./Pages/dogpage";
import CatPage from "./Pages/CatPage";
import MainPage from "./Pages/MainPage";
export default function App() {
    return (
        <>
            <header>
                <Link to="/">Main page</Link>
                <Link to="/dog"> Dog page</Link>
                <Link to="/cat"> Cat Page</Link>
            </header>

            <Routes>
                    <Route path="/" element={<MainPage />} />
                    <Route path="dog" element={<DogPage />} />
                    <Route path="cat" element={<CatPage />} />
            </Routes>
        </>
    );
};

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import App from "./App";
import {BrowserRouter} from "react-router-dom";
ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("app")
)

Webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')

const config = {
    entry: "./src/index.tsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/i,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(jpg|png|svg|jpeg|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            }
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            inject: true,
            title: 'NewPage'
    })
    ]
};

module.exports = config;

Ответы (0 шт):