Local runs fine, but when run on "npm run deploy" the website returns 404.

I have a React + TypeScript app which utilises react-router-dom BrowserRouter to navigate between pages.

I am ware of the issue on github pages with react-router, therefore I have tried adding basename={process.env.PUBLIC_URL}, changing it to a HashRouter, and many many more possibilities. I've been on this issue for 7 hours straight... and there seems to be no resources on this particular problem for Typescript.

Could someone please help me!

index.tsx

ReactDOM.render( <AppRouter />, document.getElementById('root') as HTMLElement );

Router.tsx

export const AppRouter: React.StatelessComponent<{}> = () => { return ( <BrowserRouter basename={process.env.PUBLIC_URL}> <div> <NavBar /> <Switch> <Route exact={true} path='/' component={App} /> <Route exact={true} path='/' component={Notes} /> <Route exact={true} path='/About' component={About} /> </Switch> </div> </BrowserRouter> );

Also tried Router.tsx

export const AppRouter: React.StatelessComponent<{}> = () => { return ( <HashRouter> <div> <NavBar /> <Switch> <Route exact={true} path='/' component={App} /> <Route exact={true} path='/' component={Notes} /> <Route exact={true} path='/About' component={About} /> </Switch> </div> </HashRouter> );

NavBar.tsx

export const NavBar: React.StatelessComponent<{}> = () => { return ( <div id='nav-bar'> <AppBar position='static' color='default'> <Toolbar> <span id='navbar-title'> <Typography variant='title' color='default'> Keep </Typography> </span> <Link to="/"> <Button size="large" color="primary" variant="text">Notes</Button> </Link> <Link to="/About"> <Button size="large" color="primary" variant="text">About</Button> </Link> </Toolbar> </AppBar> </div> )

Thank you for reading.

EDIT below is the exact error response from web console at 404 error. Something about favicon, could that be an issue? The location is completely wrong

json469.github.io/:1 Refused to load the image 'https://json469.github.io/favicon.ico' because it violates the following Content Security Policy directive: "img-src data:".

I've also tried debugging by printing out the process.env.PUBLIC_URL, however it returned an empty string...

EDIT2 below is the change made to Router.tsx that fixed the issue.