React router cannot GET any specified routes, except the root / - reactjs

Question

Here's my App.jsx that's first mounted to the DOM:
import React, { Component } from 'react';
import Home from './Home.jsx';
import Representatives from './Representatives.jsx';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
export default class App extends Component {
constructor() {
super();
this.state = {value: ''};
}
render() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/representatives" component={Representatives} />
</Switch>
</div>
</Router>
)
}
}
And here's the representative's component:
import React, { Component } from 'react';
export default class Representatives extends Component {
constructor() {
super();
this.state = {value: ''};
}
render() {
return (
<div>
Hello World!
</div>
)
}
}
It looks exactly like examples I've seen and my webpack config looks like other's I've seen in similar posts. Any help would be greatly appreciated, I'm at 4+ hours wracking my brain
Here's my webpack config:
const path = require('path');
const SRC_DIR = path.resolve(__dirname, './src');
const BUILD_DIR = path.resolve(__dirname, './public/');
module.exports = {
mode: 'development',
entry: path.resolve(SRC_DIR, 'index.jsx'),
output: {
filename: 'bundle.js',
path: BUILD_DIR,
publicPath: '/'
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { "presets": [
"#babel/env",
"#babel/react"
] }
}],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
]
}
}
I added the historyApiFallback: true, and publicPath: '/'
as recommended by another post here.
Here is the index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App/App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));