Express服務器和React-Router表現異常

Question

我目前正在使用react，react-router和express。 使用webpack捆綁並與webpack同時運行webpack-dev-server。

在沒有路徑的情況下加載應用程序（“ http：// localhost / ”）時，react-router鏈接重定向可以正常工作，並顯示帶有更新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應用