React router: добавление динамического URL

Question

Я использую React Router Dom 4.2.2

В настоящее время у меня есть один маршрутизатор следующим образом:

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;

И я проверил, что мы можем перейти ккаждый из маршрутов.

Затем я подумал об использовании динамического URL следующим образом:

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

Итак, компонент, который мы должны отобразить, будет:

import React from 'react';

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

Вопрос здесь следующий:

Почему, если мы перейдем по следующему URL-адресу: http://localhost:8080/edit/33, консоль выведет:

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.

Я ожидаю увидеть загружаемую страницу ив реквизиты матча, объект params с id: 33

Я также прочитал

Как добиться динамической маршрутизации в React Router 4?

Спасибо за помощь!

Answer 1

У меня тоже была такая же проблема.Моя лучшая ставка, вы смотрите React Udemy учебник Эндрю Мид.Я попробовал решение, предоставленное @ mani.saffarnia.Не сработало.Вот как я должен заставить это работать:

1. Установите публичный путь свойства как publicPath: '/' в вашем webpack.config.js в выходном блоке и блоке devserver.
2. Также изменитепорт сервера веб-пакетов по умолчанию от 8080 до 8082 (любой случайный неиспользуемый порт) на сервере веб-пакетов, чтобы гарантировать отсутствие кэширования.
3. Удаленные модули узлов.
4. Очистить кэш npm, используя npm cache clean --force
5. Удалить общие папки и переустановленные узлы и создать новую общую папку для обслуживания index.html и bundle.js
6. Наконец, запустите devсервер для рабочего вывода

Вот мой последний конфиг веб-пакета для исправленной проблемы.

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 2

В вашем файле index.html.

ваш импорт скриптов говорит:

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

, если это так.удалить "."в из "/".Таким образом, импорт скрипта

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

Это сработало для меня

Answer 3

Вы не сделали ничего плохого в своем коде.Я знаю учебник, который вы смотрите, и у меня была такая же проблема.Я только что удалил свои "публичные" и "node_modules" папки.после этого я создал новую общую папку (с новым index.html внутри нее), а также использовал «npm install» для установки всех зависимостей и повторного создания node_modules.Это сработало для меня, и я надеюсь, что это сработает и для вас.