Экспресс-сервер и реагирующий маршрутизатор ведут себя не так, как ожидалось

Question

В настоящее время я использую реагировать, реагировать на маршрутизатор и экспресс. Использование комплектации веб-пакетов и одновременный запуск webpack-dev-server с веб-пакетом.

При загрузке приложения без указания пути ('http://localhost/'), ссылка на маршрутизатор реакции перенаправляет работу нормально, и страницы отображаются с обновленным URL-адресом. При попытке получить к ним доступ путем указания пути (' / login ') , dist index.html обслуживается, но страница пуста без ошибок.

Ниже приведен индекс моего сервера

const express = require('express');
const logger = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
app.use(express.static(path.resolve('dist')));
app.use(express.static(path.resolve('public')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/api', require('./routes/creation'));
app.use('/', require('./routes/login'));

app.get('*', (request, response) => {
    response.sendFile(path.resolve('dist', 'index.html'));
});

и App.js

import React, { Component } from 'react';
import './Styling/app.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import LoginPage from './Components/Login/LoginPage';
import ResetPage from './Components/Login/ResetPage';
import RegisterPage from './Components/Login/RegisterPage';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={LoginPage} />
          <Route path="/login" component={LoginPage} />
          <Route path="/reset" component={ResetPage} />
          <Route path="/register" component={RegisterPage} />
          <Route component={LoginPage} />
        </Switch>
      </Router>
    );
  }
}

Каталог проектов

Project
 |
 +-- dist
 |   |
 |   -bundle.js
 |   -index.html
 |
 +-- public
 |  |  
 |  |-- index.html
 |    
 +-- src
 |  |  
 |  --- client /... App.js
 |  --- server /... index.js

Я не могу понять наших причин, буду очень признателен за помощь

Answer 1

В документации по созданию React App сказано, что вы должны использовать что-то вроде следующего кода, когда вам нужно обслуживать приложения с помощью маршрутизации на стороне клиента.

 app.use(express.static(path.join(__dirname, 'build')));

 -app.get('/', function (req, res) {
 +app.get('/*', function (req, res) {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

Создание приложения React