Как использовать react-router-dom с webpack?

Question

[n1ksON]

Я настроил webpack и всё работало до момента, когда я установил react-router-dom и начал использовать Route.
webpack.config.js:

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  }
};

module.exports = config;

index.js:

import React from 'react';
import { render } from 'react-dom';
import App from "./components/App";
import store from './store';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import "./index.css";

render(
	<React.StrictMode>
		<BrowserRouter>
			<Provider store={store}>
				<App />
			</Provider>
		</BrowserRouter>
	</React.StrictMode>,
	document.getElementById('root')
);

App.js:

import React from "react";
import { hot } from 'react-hot-loader/root';
import { Switch, Route } from "react-router-dom";
import Home from '../pages/Home'
import Test from '../pages/Test'

const App = () => {
  return (
    <div className="app">
        <Switch>
          <Route path="/test" component={Test} />
          <Route path="*" component={Home} />
        </Switch>
    </div>
  );
}

export default hot(App);

Если менять url путём использования Link, тогда всё отображается и меняется корректно.
Если менять url самостоятельно через адресную строку или перезагружать страницу, то выдаётся ошибка: Cannot GET /test
В консоли: GET http://localhost:8080/test 404 (Not Found)

Когда я использовал create-react-app проблем с react-router-dom не возникало. Поэтому вопрос: Как использовать react-router-dom вместе с webpack, чтобы всё работало корректно и страницы загружались как положено?

Answer 1

[TRNER]

devServer: {
    contentBase: './dist',
    historyApiFallback: true,
}

Comments

[n1ksON]

А, надо было перезапустить сервер. Работает, спасибо

Answer 2

[Игорь Махов]

Скорее всего проблема такая же как и тут, проверьте: Как связать Express Router с React Router?

Comments

[n1ksON]

К сожалению нет, это не то

[Игорь Махов]

n1ksON, У вас проблема ровно в этом же: бэк (в данном случае dev-server) не знает что отдавать при запросе на какой-то роутер, отличный от корневого и статических файлов. Он должен отдавать index.html, чтобы затем react на фронте отрендерил нужный роутер.