我无法理解网址以外的机制

时间:2019-02-01 15:18:56

标签: reactjs create-react-app react-router-v4

当我使用创建反应的应用程序内的建设和服务应用程序,我没有与打特定的URL抛出浏览器的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>

我要像在创建反应的应用内的行为。

1 个答案:

答案 0 :(得分:0)

“技巧”位于.htaccess中,而不是Webpack中:

.htaccess用于响应路由器

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