reactjs - 当 URL 包含多个路径时 React Router 不工作

Question

我正在使用 webpack-dev-server 进行开发和响应路由器。这是我的wepack配置。

const webpack = require('webpack');
const path = require('path');
const common = require('./common.config.js')
const merge  = require('webpack-merge')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = merge(common, {
    devtool: 'source-map',
    mode:'development',
    module: {
        rules: [
           {
                test: /\.(sa|sc|c)ss$/,
            use: [
                       {
                  // Adds CSS to the DOM by injecting a `<style>` tag
                  loader: 'style-loader'
                       },
                       {
                          // Interprets `@import` and `url()` like `import/require()` and will resolve them
                          loader: 'css-loader'
                   },
                   {
                          // Loader for webpack to process CSS with PostCSS
                          loader: 'postcss-loader',
                          options: {
                          plugins: function () {
                                return [
                                require('autoprefixer')
                                ];
                                   }
                          }
                       },
               {
                  // Loads a SASS/SCSS file and compiles it to CSS
                  loader: 'sass-loader'
               }
                 ]
           }
        ]
    },
    devServer:{
       contentBase: path.join(__dirname, '../dist'),
       port: 3000,
       proxy:{
          '/api': 'http://127.0.0.1:5000',
       },
       historyApiFallback:true,
       overlay: true,
       stats: 'normal'
    },
    watchOptions: {
       ignored: /node_modules/
    },

    plugins: [
    new CleanWebpackPlugin(['../dist'], { exclude:['sw.js']}),
        new HtmlWebpackPlugin({
            title: 'Script App - Dev',
            filename: '../dist/index.html',
        template:'index_template.html'
        }),
    new MiniCssExtractPlugin({
            filename: 'bundled_styles.css'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()    
    ],
});

这是我的应用程序的入口点(我在其中定义了路由)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import {BrowserRouter, Route, Switch} from 'react-router-dom'

import configureStore from './store/configureStore';

import FirstComponent from './FirstComponent';
import SecondComponent from './SecondComponent';
import App from './App';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App>
               <Switch>
                   <Route path="/first/:a_code" component={FirstComponent} />
                   <Route path="/second" component={SecondComponent} />
               </Switch>
            </App>
        </BrowserRouter>
    </Provider>,

    document.getElementById('root')
);

我正在使用 react-router v4 和 wepack v4.29。

我的问题: 当我使用 history 属性从我的代码推送路由时，一切正常，但是当我用路由刷新浏览器时，一切都变成空白。 此行为仅在具有多个路径的路由中观察到(/first/:param)。

我尝试过的:我从一些 SO 帖子中了解到，我必须将我的 webpack 配置中的 historyApiFallback 属性设置为 true ，我做了，但仍然没有帮助。this github issue中的评论之一表示如果某些 proxy 配置在 webpack 配置中可用，则 historyApiFallback 将无法正常工作。

我不想删除这些 proxy 配置，因为我正在对运行在不同端口上的另一台服务器进行 api 调用。

谁能帮我解决这个问题？请!

Answer 1

其实我漏掉了一个webpack的配置。我必须添加一个 output配置并设置 publicPath至 / .即

output:{
  publicPath: '/'
}

我还添加了 publicPath在devServer配置。即

devServer:{
  ...
  publicPath:'/',
  historyApiFallback: true
}

---

更新:

同样确保您的 bundle.js脚本像这样插入到您的 html 文件中:

<script src="/bundle.js"></script>

与非

<script src="./bundle.js"></script>或者 <script src="bundle.js"></script>