BN-35 | Refactor. Set basename value for router based on build env

Author: mohan-13

src/index.tsx

@@ -4,12 +4,6 @@ import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import './styles/index.scss';
 
-const getBasename = () => {
-  const pathname = window.location.pathname;
-  const basePath = pathname.split('/').slice(0, 2).join('/');
-  return basePath || '/';
-};
-
 // Register service worker for PWA
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
@@ -34,7 +28,7 @@ const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <BrowserRouter basename={getBasename()}>
+    <BrowserRouter basename={process.env.PUBLIC_URL || '/'}>
       <App />
     </BrowserRouter>
   </React.StrictMode>,

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -73,6 +74,9 @@ module.exports = (env, argv) => {
       ],
     },
     plugins: [
+      new webpack.DefinePlugin({
+        'process.env.PUBLIC_URL': JSON.stringify(publicPath)
+      }),
       new HtmlWebpackPlugin({
         template: './public/index.html',
         favicon: './public/favicon.ico',