react.js 与 webpack 资源由于 MIME 类型不匹配而被阻止，当使用 react 路由器访问 url 参数时 [英] react.js with webpack Resource blocked due to MIME type mismatch, when accessing an url params with react router

问题描述

当我尝试访问诸如 localhost:8080/edit/12 之类的 URL 时，我在控制台上收到一个错误，并且我无法从中访问 ID，这是否是程序包上使用的版本的问题.json 或webpack 配置文件?

组件编辑费用页面:

从react"导入React；const EditExpensePage = (props) =>{返回 (<div>这是来自 {props.match.params.id}</div> 的 EditExpensePage 组件.);};导出默认的 EditExpensePage；

组件路由器 AppRouter:

从react"导入React；从react-router-dom"导入 { BrowserRouter, Route, Switch };从../components/EditExpensePage"导入 EditExpensePage；const AppRouter = () =>(<浏览器路由器><div><标题/><开关><Route path="/edit/:id" component={EditExpensePage}/></开关>

</BrowserRouter>);

Webpack 配置文件:

const path = require("path");模块.出口 = {条目:./src/app.js"，输出: {路径:path.join(__dirname, "public"),文件名:bundle.js"，},模块: {规则: [{loader: "babel-loader",测试:/\.js$/,排除:/node_modules/，},{测试:/\.s?css$/,使用: ["style-loader", "css-loader", "sass-loader"],},],},开发工具:源地图"，开发服务器:{contentBase: path.join(__dirname, "public"),},};

解决方案

当您请求 localhost:8080/edit/12 时，您会提供 index.html，并且大概是为您的服务器上不存在的每个资源完成的服务器(作为后备).我假设在 index.html 中有以下脚本标签:

这是一个相对路径.此时您实际上是在请求 localhost:8080/edit/bundle.js，因为它不存在，所以您最终将 index.html 作为包提供，这是有问题的，因为它不是有效的 JavaScript.

无论当前 URL 是什么，您都应该始终使用/bundle.js.同样，您总是希望/styles.css 用于您的 CSS.

<script src="/bundle.js"></script>

When I try to access the URL like for example localhost:8080/edit/12 I get an error on the console and I can't access the id from it, is it the problem in the versions used on the package.json or in the webpack config file?

Component EditExpensePage:

import React from "react";
const EditExpensePage = (props) => {
  return (
    <div>This is from EditExpensePage component at {props.match.params.id}</div>
  );
};
export default EditExpensePage;

Component router AppRouter:

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import EditExpensePage from "../components/EditExpensePage";
const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/edit/:id" component={EditExpensePage} />
      </Switch>
    </div>
  </BrowserRouter>
);

Webpack config file:

const path = require("path");
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devtool: "source-map",
  devServer: {
    contentBase: path.join(__dirname, "public"),
  },
};

解决方案

When you request localhost:8080/edit/12 you serve the index.html, and presumably, that is done for every resource that doesn't exist on your server (as a fallback). I assume, in the index.html you have the following script tag:

<script src="bundle.js"></script>

This is a relative path. You are actually requesting localhost:8080/edit/bundle.js at this point and because that doesn't exist, you end up serving the index.html as the bundle, which is problematic because it's not valid JavaScript.

You should always use /bundle.js regardless of the current URL. Similarly, you'd always want /styles.css for your CSS.

<link rel="stylesheet" href="/styles.css">
<script src="/bundle.js"></script>

这篇关于react.js 与 webpack 资源由于 MIME 类型不匹配而被阻止，当使用 react 路由器访问 url 参数时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！