Question

I am using React Router Dom 4.2.2

Currently I have one Router as follows:

import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import ExpensesDashboardPage from "../components/ExpensesDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import Header from "../components/Header";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path='/' component={ExpensesDashboardPage} exact={true}/>
                <Route path='/create' component={AddExpensePage}/>
                <Route path='/edit/' component={EditExpensePage}/>
                <Route path='/help' component={HelpPage}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
);
export default AppRouter;

And I have tested that we can navigate to each one of the Route.

Then I thought about using a dynamic URL as follows:

 <Route path='/edit/:id' component={EditExpensePage}/>

So then the component which we should render is:

import React from 'react';

const EditExpensePage = (props) => {
    console.log(props);
    return (
        <div>
            This is the Edit Expenses page, enjoy!
        </div>
    );
};
export default EditExpensePage;

The question here is the following:

Why if we go to the following URL: http://localhost:8080/edit/33, the console outputs:

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

I would expect to see the page being loaded and into the match props, a params Object with the id: 33

I have also read

How to achieve Dynamic routing in React Router 4?

Thank you for your help!

Answer 1

您的代码中没有出错。我知道您正在观看的教程，我遇到了同样的问题。我刚刚删除了我的“public”和“node_modules”文件夹。之后，我创建了一个新的公共文件夹（里面有一个新的index.html），还使用“npm install”来安装所有依赖项并再次创建node_modules。它对我有用，我希望它也适合你。

Answer 2

我也有同样的问题。最好的选择是，您正在观看安德鲁·米德（Andrew Mead）的React Udemy tutorial。我尝试了@ mani.saffarnia提供的解决方案。没有锻炼。这是我如何使其工作的方法：

在输出包块和devserver块的webpack.config.js中将属性公共路径设置为publicPath: '/'。
还将webpack开发服务器中的默认webpack服务器端口从8080更改为8082（任何随机未使用的端口），以确保没有缓存。
已删除的节点模块。
使用npm cache clean --force清除npm缓存
删除公用文件夹并重新安装节点模块，并创建一个新的公用文件夹来服务index.html和bundle.js
最后运行dev服务器以获得有效的输出

这是解决该问题的最终Webpack配置。

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output:{
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module:{
        rules:[
            {
                loader:'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test:/\.s?css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    devtool:'inline-source-map',
    devServer:{
        contentBase : path.resolve(__dirname, 'public'),
        historyApiFallback: true,
        publicPath: '/',
        port: 8082
    }

};

Answer 3

在index.html文件中。

您的脚本导入是否说：

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

如果是这样。除掉 ”。”在“ /”中。所以脚本导入是

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

这对我有用

React router: adding dynamic URL

3 个答案: