我在理解 url 之外的机制时遇到问题

Question

当我使用 create-react-app 来构建和提供应用程序时，我在点击特定 url throw the browser url 行时没有问题。但是当我使用自己的 webpack 配置时，这个请求会转到后端调用。诀窍是什么？

const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    client: "./src/client/index.js"
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.html$/,
        use: [
          { loader: "html-loader" }
        ]
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "resolve-url-loader" },
        ]
      },
      {
        test: /\.(jpg|png|gif|svg|pdf|ico)$/,
        use: [
          { loader: 'file-loader' },
        ],
      },
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/client/index.html",
      filename: "./index.html"
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    hot: true,
    proxy: {
      '/api/**': {
        target: 'http://localhost:1337',
        secure: false,
      }
    }
  },
};

<Router history={history}>
      <App />
</Router>

我想要像 create-react-app 中那样的行为。

Answer 1

"trick" 位于 .htaccess，而不是 Webpack：

.htaccess for react-router

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

我在理解 url 之外的机制时遇到问题

I have problems with understanding mechanism beyond urls

reactjs

create-react-app

react-router-v4