React + TypeScript dengan masalah penerapan router di Halaman Github

Lokal berjalan dengan baik, tetapi ketika dijalankan pada "npm run deploy" situs web mengembalikan 404.

Saya memiliki aplikasi React + TypeScript yang menggunakan BrowserRouter react-router-dom untuk bernavigasi antar halaman.

Saya mengetahui masalah pada halaman github dengan router reaksi, oleh karena itu saya telah mencoba menambahkan basename={process.env.PUBLIC_URL}, mengubahnya menjadi HashRouter, dan banyak lagi kemungkinan lainnya. Saya telah menangani masalah ini selama 7 jam berturut-turut... dan sepertinya tidak ada sumber daya mengenai masalah khusus ini untuk TypeScript.

Bisakah seseorang tolong bantu saya!

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

Juga mencoba 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>
)

Terima kasih telah membaca.

EDIT di bawah ini adalah respons kesalahan sebenarnya dari konsol web pada kesalahan 404. Sesuatu tentang favicon, mungkinkah itu menjadi masalah? Lokasinya sepenuhnya salah

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

Saya juga mencoba men-debug dengan mencetak process.env.PUBLIC_URL, namun mengembalikan string kosong...

EDIT2 di bawah ini adalah perubahan yang dilakukan pada Router.tsx yang memperbaiki masalah tersebut.

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