Reactjs React-router-v4默认路由不与Express后端一起工作

我正在使用react-router-v4、react 16和Express 4作为web应用程序。我在主应用程序中使用BrowserRouter组件来呈现所有路由。当请求单级子目录（

example.com/asdf

）时，所有组件路由和默认路由（404）呈现良好，但当请求一个或多个子目录（

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;

如果我

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'])
  ]
}

---

编辑：更多信息。似乎Express routes正在工作，并使用

response.sendFile

呈现所有不存在的路由，但是当使用嵌套的子目录时，默认路由似乎停止工作。

您是如何设置webpack的？尝试从

使用中删除
“/”
：可能您可以像这里建议的那样折射错误处理：所以想法是，使用中间件，因为我们定义了上面定义的所有路由错误处理中间件，所以如果它们都不匹配，应调用最终的中间件，即错误处理中间件。已尝试删除
/
@lux，但仍然相同。问题似乎是快速路由正在工作，并使用
response.sendFile
呈现所有不存在的路由请求，但由于某种原因，默认路由停止在嵌套的子目录路径上工作。我只是得到
uncaughtsyntaxerror:意外的标记
// 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'])
  ]
}