Невозможно перейти непосредственно к динамическому маршруту с помощью response-router и webpack-dev-server

После запуска webpack-dev-server я могу перейти непосредственно к статическому маршруту (например, http://localhost:3456/one), но я не могу перейти непосредственно к динамическому маршруту (например, http://localhost:3456/two/1234).

Я считаю, что мне что-то не хватает в моей конфигурации webpack-dev-server, но не знаю, что именно.

Консоль браузера выводит эту ошибку:

GET http://localhost:3456/two/dev-bundle.js 404 (Not Found)
Refused to execute script from 'http://localhost:3456/two/dev-bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

webpack.config.js

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

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  entry: [
    "./index.js",
  ],
  output: {
    filename: "dev-bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "dev.html")
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3456,
    stats: "minimal"
  }
}

app.js

import React, { Component } from "react"
import { hot } from "react-hot-loader"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import ComponentOne from "./components/ComponentOne"
import ComponentTwo from "./components/ComponentTwo"

const MyApp = () => (
  <div>
    <Router>
      <Switch>
        <Route exact path = "/" component = {ComponentOne} />
        <Route exact path = "/one" component = {ComponentOne} />
        <Route path = "/two/:id" component = {ComponentTwo} />
      </Switch>
    </Router>
  </div>
)

export default hot(module)(MyApp)

ComponentTwo.js

import React, { Component } from "react"
import { Link } from "react-router-dom"

export default class ComponentTwo extends Component {
  render() {
    return (
      <div>
        <h1>ComponentTwo for {this.props.match.params.id}</h1>
      </div>
    )
  }
}

Любая помощь приветствуется.

Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
React-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
1 268
1

Ответы 1

Я смог решить эту проблему, обновив часть конфигурации веб-пакета:

output: {
  filename: "dev-bundle.js",
  publicPath: "/",    // added this line
},

Ошибка консоли остается, но страница хотя бы загружается.

У меня нет консольной ошибки с вашим решением (webpack 4), а проверка динамических маршрутов вручную работает хорошо.

Goran_Ilic_Ilke 13.02.2021 07:28

Другие вопросы по теме