React + TypeScript ที่มีปัญหาการปรับใช้เราเตอร์บนหน้า Github

Local ทำงานได้ดี แต่เมื่อรันบน "npm run release" เว็บไซต์จะส่งคืน 404

ฉันมีแอป React + TypeScript ซึ่งใช้ react-router-dom BrowserRouter เพื่อนำทางระหว่างหน้าต่างๆ

ฉันทราบปัญหาในหน้า github ที่มี react-router ดังนั้นฉันจึงได้ลองเพิ่ม basename={process.env.PUBLIC_URL} เปลี่ยนเป็น HashRouter และความเป็นไปได้อื่นๆ อีกมากมาย ฉันแก้ไขปัญหานี้มาเป็นเวลา 7 ชั่วโมงติดต่อกันแล้ว... และดูเหมือนว่าจะไม่มีแหล่งข้อมูลเกี่ยวกับปัญหานี้สำหรับ Typescript

ใครก็ได้โปรดช่วยฉันด้วย!

ดัชนี.tsx

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

เราเตอร์.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 บางอย่างเกี่ยวกับ favicon นั่นอาจเป็นปัญหาหรือไม่ ที่ตั้งผิดอย่างสิ้นเชิง

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 แต่มันส่งคืนสตริงว่าง ...

แก้ไข 2 ด้านล่างคือการเปลี่ยนแปลงที่เกิดขึ้นกับ 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>