React router throwing Cannot GET /info - reactjs

Question

I want to render a component using React Router, The component responsibility is just to show the JSON object containing build information (commitHash, branch, version, etc).
The problem is whenever I access http://localhost:3000/info to get the build information, it is treated as a backend API call and throws 404 error (
Cannot GET /info
) ,
I am using the express-actuator package in the server.dev.js file, I am guessing something we have to change in the server.dev.js file because it is treating the /info as a server call instead of rendering the component
Below is a code snippet
require('dotenv-flow').config();
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const {createProxyMiddleware} = require('http-proxy-middleware');
const actuator = require('express-actuator');
const app = express(),
DIST_DIR = path.join(__dirname, 'dist'),
HTML_FILE = path.join(DIST_DIR, 'index.html');
const config = require('./webpack.dev.config.js');
const compiler = webpack(config);
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PATCH");
res.header(
"Access-Control-Allow-Headers",
"X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"
);
next();
});
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
app.use(
webpackHotMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
app.use(actuator({ basePath: "/actuator" }));
app.use(express.static(DIST_DIR));
app.get("/", (req, res) => {
res.sendFile(HTML_FILE);
});
const port = process.env.PORT || 9000;
app.listen(port, function (err) {
if (err) {
console.log(`\nError in server setup: ${err}`);
}
console.log(`\nServer started on Port: ${port}...`);
});
and /webpack.dev.config.js fil
const DotenvFlow = require('dotenv-flow-webpack');
const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();
module.exports = {
entry: {
main: [
'webpack-hot-middleware/client?reload=true',
'./src/main/index.tsx'
]
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js',
globalObject: 'this'
},
mode: 'development',
target: 'web',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
},
module: {
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}, {
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}, {
test: /(\.css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}, {
test: /\.s[ac]ss$/i,
exclude: [
/\.module\.s[ac]ss$/,
/\.libs\.s[ac]ss$/,
],
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
}
},
{
loader: 'css-loader',
options: {
modules: false,
}
},
'sass-loader'
],
}, {
test: /\.module\.s[ac]ss$/,
exclude: [
/\.libs\.s[ac]ss$/,
],
use: [
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]__[hash:base64:5]',
}
}
},
'sass-loader',
]
}, {
test: /\.libs\.s[ac]ss$/,
use: [
{
loader: 'css-loader',
},
'sass-loader'
]
}, {
test: /\.(png|jpg|jpeg|gif|ico|pdf)$/,
exclude: [
path.resolve(__dirname, './node_modules'),
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
}, {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
]
}
]
},
resolve: {
extensions: ['.js', '.tsx']
},
plugins: [
new webpack.DefinePlugin({
'_GIT_VERSION_': JSON.stringify(gitRevisionPlugin.version()),
'_GITSHA_': JSON.stringify(gitRevisionPlugin.commithash()),
'_GIT_BRANCH_': JSON.stringify(gitRevisionPlugin.branch()),
'_COMMIT_TIMESTAMP_': JSON.stringify(gitRevisionPlugin.lastcommitdatetime())
}),
new DotenvFlow(),
new WebpackManifestPlugin({ publicPath: "" }),
new webpack.HotModuleReplacementPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true
}),
gitRevisionPlugin,
new HtmlWebPackPlugin({
template: './src/main/index.html',
filename: './index.html'
})
]
};
my App.tsx file
import React from "react";
import HomeComponent from "./components/HomeComponent";
import {Routes , Route } from "react-router-dom"
import BuildInfoPopper from "./components/BuildInfoPopper";
const App = () => {
return (
<div className="App">
<Routes>
<Route path="/info" element={<BuildInfoPopper/>}/>
</Routes>
</div>
);
};
export default App;
and index.tsx file
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import BuildInfoPopper from "./components/BuildInfoPopper";
import { BrowserRouter } from "react-router-dom";
const root = document.getElementById("root");
const rootElement = (
<div>
<BrowserRouter>
<App />
</BrowserRouter>
</div>
);
render(rootElement, root);
I have tried keeping the wild card character in server.dev.js but it didn't work