时间戳

首页 > 解决方案 > GitHub Page 主页子域抛出 404

reactjs - GitHub Page 主页子域抛出 404

问题描述

我将一个 React 应用程序部署到 Github Page 作为主页。

问题是我无法直接访问 /home 或任何子域，也无法刷新其上的页面。它会抛出 404。但是，如果您等待着陆页上的动画完成，则可以在应用程序内部进行重定向，您可以进入 /home。

我查了一下，没有我的其他存储库在 /home 下注册。

有人能告诉我为什么吗？我应该如何解决这个问题？

更新：反应，路由器配置：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Preloader from './components/Preloader';
import Home from './components/Home';
import './App.scss';

class App extends Component {
    render() {
        return (
            <Router>
                <React.Fragment>
                    <Switch>
                        <Route path="/" exact component={Preloader} />
                        <Route path="/home" component={Home} />
                    </Switch>
                </React.Fragment>
            </Router>
        );
    }
}

export default App;

标签： reactjsgithub-pages

解决方案

解决方案 1

正如这篇文章 Deploying A Create React App with Routing to Github Pages中所展示的， 您应该使用 aHashRouter来避免在刷新页面时在 GitHub 页面上出现 404 错误。

根据HashRouter 文档：

哈希路由器

路由器使用 URL 的散列部分（即 window.location.hash）使您的 UI 与 URL 保持同步。

重要提示：哈希历史不支持 location.key 或 location.state。在以前的版本中，我们试图对这种行为进行填充，但存在我们无法解决的极端情况。任何需要这种行为的代码或插件都不起作用。由于此技术仅旨在支持旧版浏览器，因此我们鼓励您配置您的服务器以使用它。

尝试使用以下命令更新您的导入语句：

import { HashRouter as Router, Switch, Route } from "react-router-dom";

解决方案 2

更好的解决方案可能是配置您的服务器以正确处理路由。查看本指南，了解如何为此使用 express：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

推荐阅读