无法使用react-router和webpack-dev-server直接进入动态路由

2023-12-20

启动 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>
    )
  }
}

任何帮助表示赞赏。


我可以通过更新部分 webpack 配置来解决这个问题:

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

控制台错误仍然存​​在,但至少页面加载了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法使用react-router和webpack-dev-server直接进入动态路由 的相关文章

  • 使用 ejs 重建 webpack-dev-server

    我使用 webpack dev server 进行以下配置 import webpack from webpack import autoprefixer from autoprefixer import ExtractTextPlugin
  • 反应路由器路径内的问号

    我正在尝试在 URL 中传递参数 但读取时遇到问题 我正在使用反应路由器 v4 URL http localhost 3000 reset token 123 http localhost 3000 reset token 123我试着这样
  • 组件在react-router-4中匹配空值

    我正在尝试迁移到使用 React Router 4 但在理解其逻辑时遇到了一些困难
  • 在React Router v6中以编程方式重定向到路由时出现问题

    我想对某些用户操作执行导航 例如按钮的 onSubmit 假设用户单击 添加联系人 按钮 我希望反应路由器在主页 中重定向 目前我正面临这个问题 gt TypeError Cannot read properties of undefine
  • React 热重载不适用于 webpack 4

    反应热重载不起作用 在 webpack 条目中 我有以下代码 entry home webpack dev server client http 0 0 0 0 8000 webpack hot dev server add only de
  • React Router v4 基本名称和自定义历史记录

    我想为我的路由分配一个基本名称 我可以使用 BrowserRouter 来实现 不过 我还想指定自定义历史记录 以便我可以以编程方式导航我的用户 我可以用路由器做到这一点 然而我不能两者都做 是否可以扩展其中一个路由器以支持此功能或围绕其包
  • React 路由器匹配失败

    使用有什么好处Match and Miss组件来自react router over Router成分 我似乎找不到任何关于此的文档反应路由器文档 https github com ReactTraining react router tr
  • 将 webpack 应用于全栈节点应用程序最合理的方式是什么?

    我已经研究 webpack 几个星期了 我已经看到了很多前端设置的例子 可能只是这是后端的设置 http jlongster com Backend Apps with Webpack Part I 我正在尝试设置一个带有节点后端 例如ex
  • 如何链接到 MUI 迷你抽屉侧边栏中的另一个页面?

    我尝试用 封装我的 ListItem 组件 但它不起作用 我也尝试使用历史选项 但这让我感到困惑 我的代码和框 codesandbox io s funny einstein deuqhi file src App js 这是我的 side
  • 修复js“脚本错误”

    我在实现一些简单的事情时遇到困难 我有一个 index html 文件http 本地主机 3200 http localhost 3200由 ruby on Rails 编写 它使用 javascript 文件http 本地主机 8000
  • 将 props 传递给每个组件

    我正在类内部通过 React Router 渲染一堆路由 我需要组件能够访问正在触发渲染的类的实例 因为它将包含服务工厂的实例等 但是 我找不到任何有关将 props 传递到通过 React Router 渲染的组件的信息 或者对我来说更有
  • 在 Apache 服务器上处理 React Router

    我在重定向 Apache 服务器上 React 生成的 URL 路径的 404 错误时遇到问题 设想 假设我有一些由 React Router 生成的 URL www somewebsite com apps Problem 如果最终用户单
  • 未处理的拒绝(ChunkLoadError):加载块 1 失败

    我基本上想做一个poc将我的主应用程序的某些部分提取到一个单独的包中 我已在我的 git 存储库中构建了一个示例单独包myapp poc ui https github com prabhatmishra33 myapp poc ui 现在
  • 如何为webpack使用自己的jade文件?

    我是 webpack 的新手 并试图弄清楚如何在 webpack dev server 中使用我自己的 html 文件以及我的 webpack 构建 在我的 app js 中我有 require jade index jade 但这并不意味
  • 如何使用 React Router 6 在 React 组件之外导航

    现在我有一个历史记录模块 它让我甚至可以在反应组件之外使用历史记录 import createBrowserHistory from history export default createBrowserHistory 然后我直接在App
  • React router v6 和路由内页面的相关链接

    您好 我正在尝试使用 React Router 将项目更新到 v6 我了解了基础知识 但在相关链接方面遇到了困难 我们有一个页面 通过 id 呈现给定项目的参考文档 该文档可以使用同级 ID 链接到其他 同级 材料 换句话说 用户可以在文档
  • react-route,react-hot-loader.webpack(您无法更改 ;它将被忽略)

    这是我的第一个项目react react router react hot loader webpack dev server and webpack 当我更改react组件中的代码时 热加载器生效 但同时控制台告诉我一个警告 您无法更改
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 纯组件在没有变化时渲染?

    我有一个像这样的纯组件 interface Props checkBoxTitleStyle any checkBoxBackgroundColor any onPressCheckBox id isChecked selectedArra
  • 反应超出最大调用堆栈大小

    如果用户未登录 我尝试将用户重定向到 TrapPage 这是我的代码 function requireAuth nextState replace if auth loggedIn replace pathname trap export

随机推荐