时间戳

首页 > 解决方案 > React + TypeScript 与 Github Pages 上的路由器部署问题

javascript - React + TypeScript 与 Github Pages 上的路由器部署问题

问题描述

本地运行良好，但在“npm run deploy”上运行时，网站返回 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>
);

导航栏.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 进行调试，但是它返回了一个空字符串...

下面的 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>

标签： javascriptreactjstypescriptreact-routergithub-pages

解决方案

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

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

因此，您的问题可能是您正在尝试前一条路线，而不是后者。因此，要解决它，您可以尝试这种路线，或者转移到不同的主机。

推荐阅读