Question

我正在将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;

就像我说的，我正在使用Express来托管这个Web应用程序。这些是相关的路线。

// 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'));
});

如果我在console.log路由中的app.get，在example.com/asdf/zzz等嵌套子目录上，它似乎循环4-5次，最后在空白屏幕上结束。我已经尝试删除app.js中除默认路由之外的所有其他路由，结果是相同的，它在嵌套子目录之前工作正常。

编辑：有人要求我的webpack配置，所以这里是：

// 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路由正在工作，并使用response.sendFile呈现所有不存在的路由，但默认路由似乎在使用嵌套子目录时停止工作。

React-router-v4默认路由不适用于Express后端

0 个答案: