Github頁面上的React + TypeScript與路由器部署問題

Question

本地運行正常，但是在“ npm run deploy”上運行時，網站返回404。

我有一個React + TypeScript應用程序，它利用react-router-dom BrowserRouter在頁面之間導航。

我知道帶有react-router的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>
)

感謝您的閱讀。

下面的EDIT是來自Web控制台的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>

Answer 1

這不太可能是由於TypeScript-甚至是React Router。 如果收到404，那是因為如果用戶訪問服務器不知道的路由，則服務器必須將用戶重定向到React應用，然后您的應用可以假裝進行實際路由。

但是，似乎GitHub Pages不支持此功能。 因此，您不能執行“正確的” URL，例如username.github.io/page/some-route。 如您所提到的，一種解決方法是使用哈希路由器，但這意味着URL看起來像username.github.io/page#/some-route。

因此，您的問題可能是您正在嘗試前一種方法，而不是后者。 因此，要解決該問題，您可以嘗試這種路由，也可以移至其他主機。