Question

本地运行正常，但是在“ npm run deploy”上运行时，网站返回404。

我有一个React + TypeScript应用程序，它利用react-router-dom BrowserRouter在页面之间导航。

我意识到带有react-router的github页面上的问题，因此我尝试添加basename = {process.env.PUBLIC_URL}，将其更改为HashRouter，还有很多其他可能性。我已经在这个问题上呆了7个小时了……而且对于Typescript这个特定问题似乎没有任何资源。

有人可以帮我吗！

index.tsx

import pandas as pd
import numpy as np

a = np.matrix('1 1; 1 2; 1 4; 2 1; 2 2; 2 4')
data = pd.DataFrame(a)

def jpp_np(df):
    def meaner(x, lowperc, highperc):
        low, high = np.percentile(x, [lowperc, highperc])
        return x[(x > low) & (x < high)].mean()
    return df.groupby(0)[1].apply(meaner, 20, 80).reset_index()

def jpp_pd(df):
    def meaner(x, lowperc, highperc):
        low, high = x.quantile([lowperc/100, highperc/100]).values
        return x[x.between(low, high, inclusive=False)].mean()
    return df.groupby(0)[1].apply(meaner, 20, 80).reset_index()

data = pd.concat([data]*10000)

assert np.array_equal(jpp_np(data), jpp_pd(data))

%timeit jpp_np(data)  # 11.2 ms per loop
%timeit jpp_pd(data)  # 12.5 ms per loop

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

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

感谢您阅读。

下面的编辑是Web控制台在404错误下的确切错误响应。关于收藏夹图标，这可能是个问题吗？位置完全错误

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

我还尝试通过打印出process.env.PUBLIC_URL进行调试，但是它返回了一个空字符串...

下面的EDIT2是对Router.tsx所做的更改，它解决了该问题。

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

Answer 1

这不太可能是由于TypeScript-甚至是React Router。如果收到404，那是因为如果用户访问服务器不知道的路由，则服务器必须将用户重定向到React应用，然后您的应用就可以假装进行实际路由。

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

因此，您的问题可能是您正在尝试前一种方法，而不是后者。因此，要解决该问题，您可以尝试这种路由，也可以移至其他主机。

Github页面上的React + TypeScript与路由器部署问题

1 个答案: