Маршрут React-router-v4 по умолчанию не работает с экспресс-бэкэндом - PullRequest
Новая
       21

Маршрут React-router-v4 по умолчанию не работает с экспресс-бэкэндом

0 голосов
/ 15 мая 2018

Я использую React-router-v4, React 16 и Express 4 для веб-приложения.Я использую компонент BrowserRouter для моего основного приложения, чтобы отобразить все мои маршруты.Все маршруты компонентов и маршрут по умолчанию (404) отображаются нормально при запросе подкаталога одного уровня (example.com/asdf), но когда запрашивается одна или несколько подкаталогов (example.com/asdf/zzz), маршрут по умолчанию не соответствует запросу исделать, и я просто остался с пустой страницей.Вот пример моего app.js с моими маршрутами: 

import React, { Component } from 'react';
import {
  BrowserRouter, Switch, Route
} from 'react-router-dom'

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <ScrollToTopRoute exact path="/" component={Cover}/>
          <ScrollToTopRoute path="/faq" component={FAQ}/>
          <ScrollToTopRoute path="/signup" component={Signup}/>
          <ScrollToTopRoute path="/login" component={Login}/>
          <Route component={FourOhFour} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

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

// Serve up index as React app under build dir
app.use('/', express.static(path.join(__dirname, 'build')));

// Handles all other react routes so no 404 errors
app.get('/*', function (request, response){
  response.sendFile(path.join(__dirname, 'build/index.html'));
});

Если I console.log внутри маршрута app.get, во вложенных подкаталогах, таких как example.com/asdf/zzz, кажется, что цикл 4-5 раз, прежде чем окончательно завершиться напустой экран.Я попытался удалить все другие маршруты, кроме маршрута по умолчанию в app.js, и результаты те же, он работает нормально, пока не вложенные подкаталоги.

РЕДАКТИРОВАТЬ: Кто-то спросил мою конфигурацию веб-пакета, так что это: 

// webpack.config.js
const HtmlPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // Tell webpack to start bundling our app at src/index.js
  entry: [
    './src/index.js'
    ],
  // Output our app to the dist/ directory
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, "build")
  },
  // Emit source maps so we can debug our code in the browser
  devtool: 'source-map',
  // Tell webpack to run our source code through Babel
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
    {
      test: /\.css$/,
      loader: [ 'style-loader', 'css-loader' ]
    },
    {
      test: /\.(png|jpg|gif|svg|ico)$/,
      loader: 'file-loader?name=./public/img/[hash].[ext]'
    },
    {
      test: /\.(json)$/,
      loader: 'file-loader?name=./public/assets/[hash].[ext]'
    },
    {
      test: /\.(eot|ttf|woff|woff2)$/,
      loader: 'file-loader?name=./public/fonts/[hash].[ext]'
    },
    {
      test: /\.(html)$/,
      options: {
        attrs: ['link:href']
      },
      loader: 'html-loader'
    }]
  },
  // Since Webpack only understands JavaScript, we need to
  // add a plugin to tell it how to handle html files.
  plugins: [
    // Configure HtmlPlugin to use our own index.html file
    // as a template.
    // Check out https://github.com/jantimon/html-webpack-plugin
    // for the full list of options.
    new HtmlPlugin({
      template: './public/index.html'
    }),
    new webpack.EnvironmentPlugin(['NODE_ENV'])
  ]
}

РЕДАКТИРОВАТЬ: Еще немного информации.Похоже, что экспресс-маршруты работают и отрисовывают все несуществующие маршруты, используя response.sendFile, но маршрут по умолчанию перестает работать при использовании вложенных подкаталогов.

...