react-router-dom не отображает страницу, заданную через uri. Несоответствиие MIME-типа

Question

использую в проекте webpack:5.10.0, react: 17.0.1, react-router-dom: 5.2.0. В ходе написания приложения нужно добавить страницу просмотра поста по uri вида "/user/:username". Но по совершенно непонятной для меня причине, при загрузке страницы получаю непонятную ошибку:

Я взял код-пример отсюда: https://reactrouter.com/web/api/Route. Он все равно у меня не работает.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

function User(props) {
    return <h1>Hello {props.match.params.username}!</h1>;
}

const Test = () => (
    <h1>Test work</h1>
)


ReactDOM.render((
    <Router>
        <Route path="/test" component={Test} />
        <Route path="/user/:username" component={User} />
    </Router>
), document.getElementById("root"));

Роуты, без параметров (типа "/test") обрабатываются корректно.

Прикрепляю конфиг вебпака c dev сервером(уже начинаю думать, что он как-то некорректно настроен, хотя маловероятно).

 devServer: {
        port: 3000,
        historyApiFallback: true,
        disableHostCheck: true,
        // https: true,
    },

Answer 1

Решил проблему, указав в конфиге вебпака publicPath: "/". Также для нормальной загрузки favicon.ico и всех картинок добавил в начало пути "/".

 

output: {
        filename: 'src/index_bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    ...
devServer: {
    //open: true,
    port: 3000,
    historyApiFallback: true,
    disableHostCheck: true,
    // https: true,
},

БЛОГ НА HUSL

react-router-dom не отображает страницу, заданную через uri. Несоответствиие MIME-типа

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