Wsrtjtyk

i have a project with this structure
main folder : BridgeItFronEnd ( i know, it's spelled uncorrectly) and under this folder i have several folders among which "app" where all my code is under.

My webpack.prod.babel is this :

    // Important modules this config uses

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const WebpackPwaManifest = require('webpack-pwa-manifest');

const OfflinePlugin = require('offline-plugin');

const { HashedModuleIdsPlugin } = require('webpack');



module.exports = require('./webpack.base.babel')({

  mode: 'production',



  // In production, we skip all hot-reloading stuff

  entry: [path.join(process.cwd(), 'app/app.js')],



  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets

  output: {

    filename: '[name].[chunkhash].js',

    chunkFilename: '[name].[chunkhash].chunk.js',

  },



  optimization: {

    minimize: true,

    nodeEnv: 'production',

    sideEffects: true,

    concatenateModules: true,

    splitChunks: { chunks: 'all' },

    runtimeChunk: true,

  },



  plugins: [

    // Minify and optimize the index.html

    new HtmlWebpackPlugin({

      template: 'app/index.html',

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeRedundantAttributes: true,

        useShortDoctype: true,

        removeEmptyAttributes: true,

        removeStyleLinkTypeAttributes: true,

        keepClosingSlash: true,

        minifyJS: true,

        minifyCSS: true,

        minifyURLs: true,

      },

      inject: true,

    }),



    // Put it in the end to capture all the HtmlWebpackPlugin's

    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin

    new OfflinePlugin({

      relativePaths: true,

      publicPath: '/',

      appShell: '/',



      // No need to cache .htaccess. See http://mxs.is/googmp,

      // this is applied before any match in `caches` section

      excludes: ['.htaccess'],



      caches: {

        main: [':rest:'],



        // All chunks marked as `additional`, loaded after main section

        // and do not prevent SW to install. Change to `optional` if

        // do not want them to be preloaded at all (cached only when first loaded)

        additional: ['*.chunk.js'],

      },



      // Removes warning for about `additional` section usage

      safeToUseOptionalCaches: true,

    }),



    new WebpackPwaManifest({

      name: 'React Boilerplate',

      short_name: 'React BP',

      description: 'My React Boilerplate-based project!',

      background_color: '#fafafa',

      theme_color: '#b1624d',

      icons: [

        {

          src: path.resolve('app/images/icon-512x512.png'),

          sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192, 384, 512],

        },

      ],

    }),



    new HashedModuleIdsPlugin({

      hashFunction: 'sha256',

      hashDigest: 'hex',

      hashDigestLength: 20,

    }),

  ],



  performance: {

    assetFilter: assetFilename =>

      !/(.map$)|(^(main.|favicon.))/.test(assetFilename),

      },

    });

my webpack.prod.base is

   /**

 * COMMON WEBPACK CONFIGURATION

 */



const path = require('path');

const webpack = require('webpack');



// Remove this line once the following warning goes away (it was meant for webpack loader authors not users):

// 'DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic,

// see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions()

// in the next major version of loader-utils.'

process.noDeprecation = true;



module.exports = options => ({

  mode: options.mode,

  entry: options.entry,

  output: Object.assign(

    {

      // Compile into js/build.js

      path: path.resolve(process.cwd(), 'build'),

      publicPath: (process.env.NODE_ENV==='development'?'/':'./'),

    },

    options.output,

  ), // Merge with env dependent settings

  optimization: options.optimization,

  module: {

    rules: [

      {

        test: /.js$/, // Transform all .js files required somewhere with Babel

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: options.babelQuery,

        },

      },

      {

        // Preprocess our own .css files

        // This is the place to add your own loaders (e.g. sass/less etc.)

        // for a list of loaders, see https://webpack.js.org/loaders/#styling

        test: /.css$/,

        exclude: /node_modules/,

        use: ['style-loader', 'css-loader'],

      },

      {

        // Preprocess 3rd party .css files located in node_modules

        test: /.css$/,

        include: /node_modules/,

        use: ['style-loader', 'css-loader'],

      },

      {

        test: /.(eot|otf|ttf|woff|woff2)$/,

        use: 'file-loader',

      },

      {

        test: /.svg$/,

        use: [

          {

            loader: 'svg-url-loader',

            options: {

              // Inline files smaller than 10 kB

              limit: 10 * 1024,

              noquotes: true,

            },

          },

        ],

      },

      {

        test: /.(jpg|png|gif)$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              // Inline files smaller than 10 kB

              limit: 10 * 1024,

            },

          },

          {

            loader: 'image-webpack-loader',

            options: {

              mozjpeg: {

                enabled: false,

                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments

                // Try enabling it in your environment by switching the config to:

                // enabled: true,

                // progressive: true,

              },

              gifsicle: {

                interlaced: false,

              },

              optipng: {

                optimizationLevel: 7,

              },

              pngquant: {

                quality: '65-90',

                speed: 4,

              },

            },

          },

        ],

      },

      {

        test: /.html$/,

        use: 'html-loader',

      },

      {

        test: /.(mp4|webm)$/,

        use: {

          loader: 'url-loader',

          options: {

            limit: 10000,

          },

        },

      },

    ],

  },

  plugins: options.plugins.concat([

    new webpack.ProvidePlugin({

      // make fetch available

      fetch: 'exports-loader?self.fetch!whatwg-fetch',

    }),



    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`

    // inside your code for any environment checks; UglifyJS will automatically

    // drop any unreachable code.

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: JSON.stringify(process.env.NODE_ENV),

      },

    }),

  ]),

  resolve: {

    modules: ['node_modules', 'app'],

    extensions: ['.js', '.jsx', '.react.js'],

    mainFields: ['browser', 'jsnext:main', 'main'],

  },

  devtool: options.devtool,

  target: 'web', // Make web variables accessible to webpack, e.g. window

  performance: options.performance || {},

});

when i generate the build i have a bunch of chunks in a build folder and an index.html. If i run that everything works fine since i added the relative path ./ in the webpack configuration but routing does not work I end up getting the page not found component .
Here is my app.js

/**

 * app.js

 *

 * This is the entry file for the application, only setup and boilerplate

 * code.

 */



// Needed for redux-saga es6 generator support

import 'babel-polyfill';



// Import all the third party stuff

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { ConnectedRouter } from 'react-router-redux';

import FontFaceObserver from 'fontfaceobserver';

import createHistory from 'history/createBrowserHistory';

import 'sanitize.css/sanitize.css';

import { PersistGate } from 'redux-persist/integration/react';

import localforage from 'localforage'

import { createBrowserHistory } from 'history';



const history = createBrowserHistory({ basename: '/BridgeItFronEnd/', });



// Import root app

import App from 'containers/App/index';



// Import Language Provider

import LanguageProvider from 'containers/LanguageProvider';



// Load the favicon and the .htaccess file

import '!file-loader?name=[name].[ext]!./images/favicon.ico';

import 'file-loader?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions



import configureStore from './globalStore/configureStore';



// Import i18n messages

import { translationMessages } from './i18n';



// Import CSS reset and Global Styles

import './global-styles';



import { isOnline } from './containers/App/store/actions'

// Observe loading of Open Sans (to remove open sans, remove the <link> tag in

// the index.html file and this observer)

const openSansObserver = new FontFaceObserver('Open Sans', {});



// When Open Sans is loaded, add a font-family using Open Sans to the body

openSansObserver.load().then(() => {

  document.body.classList.add('fontLoaded');

});



// Create redux store with history

const initialState = {};

//const history = createHistory();

const { store, persistor } = configureStore(initialState, history);

const MOUNT_NODE = document.getElementById('app');



  window.addEventListener("online",() => store.dispatch(isOnline(true)))

  window.addEventListener("offline", () => store.dispatch(isOnline(false)))





// temporary create localforage db and threee differents tables



localforage.config({

  driver      : localforage.INDEXEDDB, // Force WebSQL; same as using setDriver()

  name        : 'BridgeIt',

  version     : 1.0,

  storeName   : 'media', // Should be alphanumeric, with underscores.

  description : 'some description'

});





const render = messages => {

  ReactDOM.render(

    <Provider store={store}>

      <PersistGate loading={null} persistor={persistor}>

        <LanguageProvider messages={messages}>

          <ConnectedRouter history={history}>

            <App />

          </ConnectedRouter>

        </LanguageProvider>

      </PersistGate>

    </Provider>,

    MOUNT_NODE,

  );

};



if (module.hot) {

  // Hot reloadable React components and translation json files

  // modules.hot.accept does not accept dynamic dependencies,

  // have to be constants at compile-time

  module.hot.accept(['./i18n', 'containers/App'], () => {

    ReactDOM.unmountComponentAtNode(MOUNT_NODE);

    render(translationMessages);

  });

}



// Chunked polyfill for browsers without Intl support

if (!window.Intl) {

  new Promise(resolve => {

    resolve(import('intl'));

  })

    .then(() =>

      Promise.all([

        import('intl/locale-data/jsonp/en.js'),

        import('intl/locale-data/jsonp/de.js'),

      ]),

    )

    .then(() => render(translationMessages))

    .catch(err => {

      throw err;

    });

} else {

  render(translationMessages);

}



// Install ServiceWorker and AppCache in the end since

// it's not most important operation and if main code fails,

// we do not want it installed

if (process.env.NODE_ENV === 'production') {

  require('offline-plugin/runtime').install(); // eslint-disable-line global-require

}

and here's my routing :

/**

 *

 * App

 *

 * This component is the skeleton around the actual pages, and should only

 * contain code that should be seen on all pages. (e.g. navigation bar)

 */



import React from 'react';

import styled from 'styled-components';

import { Switch, Route } from 'react-router-dom';



import HomePage from '../HomePage/Loadable';

import FeaturePage from 'containers/FeaturePage/Loadable';

import NotFoundPage from '..//NotFoundPage/Loadable';

import TestContainer from '../TestContainer/index';

import { Login } from '../Login/login';

import Procedure from '../Procedure/Procedure';

import ImageShower from '../Identification/imageShower';

import IdentificationWithLocalStorage from '../Identification/index';



const AppWrapper = styled.div`

  margin: 0 auto;

  display: flex;

  flex: 1;

`;



export default function App() {

  return (

    <AppWrapper>

      <Switch>

        <Route exact path="/" component={Login} />

        <Route path="/home" component={HomePage} />

        <Route path="/features" component={FeaturePage} />

        <Route path="/testContainer" component={TestContainer} />

        <Route path="/Procedure" component={Procedure} />

        <Route path="/Identification" component={IdentificationWithLocalStorage} />

        <Route path="/ImageShower" component={ImageShower} />

        <Route path="" component={NotFoundPage} />

      </Switch>

    </AppWrapper>

  );

}

So when i load index.html ( generated from the build) into the browser i get this link

http://localhost:63342/BridgeItFronEnd/build/index.html?_ijt=q2vhihun8bn8su5bg8q68353h5

and no matter what i put after / in the url i end up in the Page not found route. How can i fix this? And most of all WHY? So i can understand better and avoid making the same mistake again.
Thank you so much in advance for the time and patience!