时间戳

首页 > 解决方案 > 在自定义域上部署 React App 时出现 404 错误

javascript - 在自定义域上部署 React App 时出现 404 错误

问题描述

似乎我遵循了文档中的所有必要内容，但是当我进入https://juliesong.me时，它​​不断给出 404 错误：“这里没有 GitHub 页面” 。我通过 GoDaddy 获得了我的自定义域，并像这样配置了 DNS：

然后我将package.json文件更改为

"homepage": "https://www.juliesong.me",

在根目录中添加了一个 CNAME 文件，其中包含 www.juliesong.me

最后进入 GitHub 页面中的设置：

我搜索了我的问题，很多人说这可能与 React 路由器有关，所以我进行了编辑以包含一个基本名称：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter as Router } from "react-router-dom";
import * as serviceWorker from './serviceWorker';

const routing = (
  <Router basename={process.env.PUBLIC_URL}>
    <App />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

这是我的 App.js：

import React, { Component } from 'react';
import {Route} from 'react-router-dom';
import { withRouter } from 'react-router'
import { GlobalStyles, } from "./util/GlobalStyles";

import Home from './containers/Home'


class App extends Component {

  render() {
    const home = () => <Home />

    return (
      <main>
        <GlobalStyles />
          <React.Fragment>
              <Route exact path="/" component={home} />
          </React.Fragment>
      </main>
    );
  }
}

export default withRouter(App);

如果有人可以在这个问题上提供帮助，那就太好了:)

标签： javascriptreactjsdeploymentcreate-react-appgithub-pages

解决方案

除非您分享如何生成构建并将其推送到 GitHub Pages，否则很难确定此问题的原因。

仍然让我分享一个在 GitHub 页面中部署 React 应用程序的一般方法。

  • 你不需要basename在你的路由器中添加
  • 好消息是您使用HashRouter而不是BrowserRouter，因为 GitHub 页面不像普通浏览器那样支持历史 API，它会在给定路径中查找特定文件
  • 要部署您的应用程序，您需要以相同的顺序运行以下命令 -
npm run build # this will generate a build folder

gh-pages -d build # this will publish the build folder to GitHub pages

发布文件夹非常重要build，因为它包含index.htmlGitHub 将指向的文件。

您可以在此处阅读有关将 React 应用程序部署到 GitHub Pages 的更多信息

推荐阅读