Страница Refre sh на выходах реакции-маршрутизатора пустая страница, пакет. js не загружен - PullRequest
Новая
       9

Страница Refre sh на выходах реакции-маршрутизатора пустая страница, пакет. js не загружен

0 голосов
/ 06 февраля 2020

Я могу получить доступ ко всем путям, пока я не обновлю sh страницу. Однако, когда я обновляю sh страницу, я получаю пустую страницу без ошибок. Я просмотрел несколько ответов, связанных с этой проблемой, но мне не удалось найти решение, которое подойдет для моей установки.

Я использую реагирующий маршрутизатор и express, я установил historyApiFallback: true и publicPath: '/'. Я проверил консоль после обновления страницы, и пакет не загружен. js загружен, загружен только индекс. html загружен - что объясняет пустую страницу. Я надеюсь, что кто-то может пролить свет на это.

структура папок 

public
-- index.html
src
-- client
-- server
   -- index.js
webpack.config.js

webpack.config. js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
  entry: ['babel-polyfill', './src/client/index.js'],
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true
          }
        },
        'sass-loader'
      ],
      include: /\.module\.scss$/
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      exclude: /\.module\.scss$/
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/,
      loader: 'url-loader?limit=100000'
    }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8080'
    },
    historyApiFallback: true
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ]
};

сервер. js

require('dotenv').config()
const express = require('express')

const { logger, session } = require('./loader')
const auth = require('./api/middleware/authentication')
const { authRoute, sendRoute } = require('./api/routes')


const app = express();

app.use(session);

app.use(express.json())

app.use(express.static('dist'))

// API routes
app.use('/auth', authRoute)
app.use('/send', auth, sendRoute)

app.listen(process.env.PORT || 8080, () => {
  logger.info(`Listening on port ${process.env.PORT || 8080}!`)
})

Приложение. js Фрагмент 

<Switch>
  <Route path="/" exact><LandingPage /></Route>
  <Route path="/login">
    <Container maxWidth="lg" className={classes.container}>
      <Login />
    </Container>
  </Route>
  <Route path="/end"><EndPage /></Route>
</Switch>
...