React-Router 和 webpack-dev-server 重新加载

Posted 2023-02-21

【中文标题】React-Router 和 webpack-dev-server 重新加载

【英文标题】：React-Router and webpack-dev-server reloading

【发布时间】：2018-01-25 06:48:17

【问题描述】：

我一直在使用 react-router v4 并注意到在重新加载时（例如 localhost:8080/route1 我会得到 Cannot Get route1。我对此进行了调查，发现一种解决方案是为所有路由提供 index.html（加上 bundle.js 请求的静态文件）和 react-router 路由现在可以正常运行。

但是现在我使用自己的服务器，我没有得到 webpack-dev-server 的好处，例如保存时重新加载、缓存包以快速重新编译等。

所以我的问题是我该怎么办？有没有办法让 webpack-dev-server 处理 react-router 路由问题？或者我应该继续使用我自己的服务器并以某种方式模拟我从 webpack-dev-server 获得的好处？或者其他一些我没有考虑过的事情。

【参考方案1】：

我通过在 webpack.config.js 中设置输出 publicPath 解决了类似的问题。这是文件夹结构：

project-folder
 -webpack.config.js
 -node_modules
 -src
 --index.html
 --js
 ---app
 ----index.bundle.js
 ----index.js

webpack.config.js

var path = require('path');

module.exports = 
  entry: 
    index: './src/js/app/index.js'
  ,
  output: 
    path: path.resolve(__dirname, 'src/js/app'),
    filename: '[name].bundle.js',
    publicPath: '/src/js/app/',
  ,
  resolve: 
    extensions: ['.ts', '.tsx', '.js']
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /(node_modules|bower_components)/
      ,
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            js: 'babel-loader',
            scss: 'vue-style-loader!css-loader!sass-loader'
          
        
      ,
      
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: 
          name: '[name].[ext]',
          publicPath: 'js/app/',
        
      
    ]
  ,
  devServer: 
    noInfo: true
  ,
;

【讨论】：

这是我现在的配置，不知何故它可以在不指定公共路径gist.github.com/alexbollbach/7a7abed3b345dd2e819f459a6a495f89

的情况下工作

在我的情况下，对于 rooter 来说，root 是项目文件夹，而不是我想要的 src，所以 rooter 失败了，我需要更改公共路径。无论如何，您已经解决了没有公共路径的问题，对吧？采用了什么解决方案？