React + TypeScript с проблемой развертывания маршрутизатора на страницах Github

Local работает нормально, но при запуске "npm run deploy" веб-сайт возвращает 404.

У меня есть приложение React + TypeScript, которое использует BrowserRouter для навигации по страницам.

Я осведомлен о проблеме на страницах github с реактивным маршрутизатором, поэтому я попытался добавить basename = {process.env.PUBLIC_URL}, изменить его на HashRouter и многое другое. Я занимаюсь этой проблемой 7 часов подряд ... и, похоже, нет ресурсов по этой конкретной проблеме для Typescript.

Может кто-нибудь мне помочь!

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>
);

Также пробовал 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>
)

Спасибо за чтение.

РЕДАКТИРОВАТЬ ниже - это точный ответ веб-консоли на ошибку 404. Что-то о фавиконе, это может быть проблемой? Расположение совершенно неправильное

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:".

Я также пробовал отладку, распечатав process.env.PUBLIC_URL, однако он вернул пустую строку ...

EDIT2 ниже - это изменение, внесенное в Router.tsx, которое устранило проблему.

    <HashRouter>
        <div>
            <NavBar />
                <main>
                    <Switch>
                        <Route exact = {true} path='/' component = {App} />
                        <Route exact = {true} path='/' component = {Notes} />
                        <Route exact = {true} path='/About' component = {About} />
                    </Switch>
                </main>
        </div>
    </HashRouter>