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;