React Router не работает, когда URL содержит несколько путей

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, что яМне пришлось установить свойство historyApiFallback в моей конфигурации webpack на true, и я сделал, но это все равно не помогло.Один из комментариев в этой проблеме github говорит, что historyApiFallback не будет работать хорошо, если в конфигурации webpack доступны определенные конфигурации proxy.

Я не хочу удалять эти proxy конфигурации, потому что я делаю вызовы API на другой сервер, работающий на другом порту.

Может кто-нибудь помочь мне в этом?Пожалуйста!

Answer 1

Я действительно пропустил конфигурацию веб-пакета.Мне пришлось добавить конфигурацию output и установить publicPath на /.т.е.

output:{
  publicPath: '/'
}

Я также добавил publicPath в конфигурации devServer.т.е.

devServer:{
  ...
  publicPath:'/'
}

Answer 2

У меня была похожая ситуация, и я решил использовать render: func, чтобы избежать перемонтирования компонента при совпадении местоположения.

Так что мой маршрут выглядит следующим образом

<Route
  path="/first/:a_code"
  render={props => 
    <FirstComponent {...props}/>
  }
/>

и затем в моем компоненте я получаю параметры с соответствием

const first_component = (props) => {
  return (
    <div>
      {props.match.params.a_code}
    </div>
  )
}

по URL-адресу "/ first / что-то". Я могу обновить браузер и все равно получить нужные параметры, без каких-либо ошибок или пробелов.стр.И я не верю, что это проблема конфигурации, потому что я до сих пор не извлекал конфигурации веб-пакетов в этом проекте.