React route working properly when used with <Link> but not working when redirected from webpack.config.js

In my react project I am using client side routing using React Router DOM v4.

Video link to my problem statement: https://drive.google.com/file/d/1nHY-dKxZvDylF5GQUTK02I8Mam1d5eru/view?usp=sharing

I have created the route like this <Route path="/pg-response/:status" component={PaytmResponse} exact={true}/>

<Route path="/pg-response/:status" component={PaytmResponse} exact={true}/>

Here is my AppRouter.js file

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import PrivateRoute from './PrivateRoute';

import HomePage from './../components/HomePage';
import AboutUs from './../components/AboutUs';
import ContactUs from './../components/ContactUs';
import PageNotFound from './../components/PageNotFound';
import RestaurantList from '../components/RestaurantList';
import Foodcourt from '../components/Foodcourt';
import RestaurantMenu from '../components/RestaurantMenu';
import UserDetails from '../components/UserDetails';
import OrderConfirmation from '../components/OrderConfirmation';
import CustomerAccount from '../components/CustomerAccount';
import Logout from '../components/sections/Logout';
import RedirectPG from '../components/sections/RedirectPG';
import SodexoResponse from '../components/sections/SodexoResponse';
import OrderFail from '../components/OrderFail';
import PaytmResponse from '../components/sections/PaytmResponse';


export default () => {
return (
<BrowserRouter>
<Route render={({location}) => (
<TransitionGroup>
<CSSTransition key={location.key} timeout={300} classNames="fade">
<Switch location={location}>
<Route path="/" component={HomePage} exact={true}/>
<Route path="/about" component={AboutUs} />
<Route path="/contact" component={ContactUs} />
<Route path="/restaurants" component={RestaurantList} />
<Route path="/foodcourt" component={Foodcourt} />
<Route path="/select-menu" component={RestaurantMenu} />
<PrivateRoute path="/user-details" component={UserDetails} />
<PrivateRoute path="/order-confirmation" component={OrderConfirmation} />
<PrivateRoute path="/payment-failed" component={OrderFail} />
<PrivateRoute path="/my-account" component={CustomerAccount} />
<PrivateRoute path="/logout" component={Logout} />
<PrivateRoute path="/redirect-to-pg" component={RedirectPG} />
<PrivateRoute path="/sodexo-response" component={SodexoResponse} />
<PrivateRoute path="/paytm-response"/>
<Route path="/pg-response/:status" component={PaytmResponse} exact={true}/>

<Route component={PageNotFound} />
</Switch>
</CSSTransition>
</TransitionGroup>
)} />

</BrowserRouter>
);
}


The problem is that when I go on this route from <Link> click it works without any problem.
But when I go on this route by redirecting from webpack.config.js file I get a lot of errors.

<Link>

webpack.config.js

Here is my webpack.config.js file

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const url = require('url');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

const app = express();

module.exports = (env) => {

const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');

return {
entry: ['babel-polyfill','./src/app.js'],
output: {
path : path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.css$/,
use: CSSExtract.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
})
},
{
test: /.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8000,
name: 'images/[hash]-[name].[ext]',
publicPath: '/dist/'
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf|mp4)$/,
use: [
{
loader: "file-loader",
options: {
name: 'files/[hash]-[name].[ext]',
publicPath: '/dist/'
}
}
]

}
]
},
plugins: [
CSSExtract,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": "jquery"
})
],
devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/',
setup: (app) => {
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/paytm-response',(req, res) => {
res.redirect(`/pg-response/${req.body.STATUS}`);
})
}
}
}
}


I am also using the historyApiFallback: true.
Still the problem exists.

historyApiFallback: true

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.