React + Webpack: не могу перенаправить все мои маршруты на index.html

Я создаю приложение React без использования create-react-app, но использую webpack для его создания и webpack-dev-server для его обслуживания.

Моя структура каталогов:

myApp
|
|---docs/
|   |
|   |---dist/
|   |   |
|   |   |---bundle.js
|   |---index.html
|---src/
|---package.json
|---package-lock.json
|---README.md
|---webpack.config.js

и мой webpack.config.js:

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/docs/dist'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: [/.css$|.scss$/],
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|jpg|gif)$/,
        loader: 'file-loader?limit=10000&name=../assets/images/[name].[ext]'
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000&name=../assets/fonts/[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    contentBase: './docs',
    compress: true,
    port: 9000,
    historyApiFallback: true
  }
};

В Документация по веб-пакету об historyApiFallback говорится, что эта конфигурация historyApiFallback: true перенаправит все 404 ответа на index.html.

Бывает, что я использую react-router-dom и у меня есть следующие маршруты:

<BrowserRouter>
    <Switch>
        <Route exact path = "/" component = {Homepage} />
        <Route path = "/about" component = {About} />
        <Route path = "/article/:id/show" component = {Article} />
        <Route path = "/donate" component = {Donate} />
    </Switch>
</BrowserRouter>

С /, /about и /donate все в порядке, но когда я пробую маршрут /article/<something>/show, я все равно получаю сообщение об ошибке 404, как показано на изображении ниже.

React + Webpack: не могу перенаправить все мои маршруты на index.html

Пишет, что не может найти файл bundle.js. Но тогда это не перенаправляет мой маршрут на index.html в первую очередь. Если бы это было так, он бы нашел файл bundle.js, как и в других маршрутах.

Как я могу выполнять эту работу?

РЕДАКТИРОВАТЬ

Установка publicPath на /, как было предложено, не решит проблему. Во-первых, / — это не путь моего актива.

Установка этого /docs/dist, пути моего реального публичного актива, в какой-то степени работает. Но решение приходит только в том случае, если вы используете абсолютный путь при загрузке ресурсов.

Добавьте publicPath='/' в конфигурацию веб-пакета.

Sameer Reza Khan 07.07.2019 10:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
1 453
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно указать publicPath в объекте output следующим образом:

    output: {
        filename: 'bundle.js',
        path: __dirname + '/docs/dist',
        publicPath: '/'
    },

Вы можете прочитать документ для получения дополнительной информации.

Почему? Мой / вообще не публичный. Его нельзя подавать. Кроме того, я сделал это, и ошибка продолжается. Не могли бы вы уточнить это? Я люблю решения, но еще больше люблю их понимать.

Ed de Almeida 07.07.2019 13:42

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