在 github 頁面上部署后 Gatsby 鏈接失敗

Question

我在蓋茨比（我的第一個）中創建了網站，但在部署頁面上的蓋茨比鏈接有問題。 我正在使用一個gatsby-starter-react-bootstrap ，它包括 gatsby 和 react-bootstrap，顧名思義：) 我在NavDropdown.Item中找到了 Links，它是 react-bootstrap 的一個元素。

import React from "react"
import {Link} from "gatsby"

import {Navbar, Nav, NavDropdown, Image} from "react-bootstrap"

import Logo from "../images/Logo_White_RGB_200x42px.png";
import customer_logo from "../images/customer_logo.svg";

const CustomNavbar = ({pageInfo}) => {

    return (
        <>
      <Navbar variant="dark" expand="md" id="site-navbar">
        {/* <Container> */}
        <Link to="/" className="link-no-style">
          <Navbar.Brand as="span">
              <Image src={Logo} />
          </Navbar.Brand>
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" activeKey={pageInfo && pageInfo.pageName}>
              <NavDropdown title="Project" id="collapsible-nav-dropdown">
                  <NavDropdown.Item><Link to="360-viewer" activeClassName="active">360 view</Link></NavDropdown.Item>
                  <NavDropdown.Item><Link to="map" activeClassName="active">map</Link></NavDropdown.Item>
                  <NavDropdown.Item><Link to="description" activeClassName="active">description</Link></NavDropdown.Item>
              </NavDropdown>
          </Nav>
          <Nav className="ml-auto">
              <Navbar.Text>
                  Customer: <a href="https://customer.com/"> Customer Group</a> <Image className="customer-logo" src={customer_logo}/>
              </Navbar.Text>
          </Nav>
        </Navbar.Collapse>
          {/* </Container> */}
      </Navbar>
    </>
    )
};

export default CustomNavbar

對於部署，我使用https://www.npmjs.com/package/gh-pages 。

在 localhost:8000 本地運行的開發版本完全正常。 下拉菜單和所有鏈接都可以正常工作。 當我嘗試將版本用於生產時，路由停止工作 - gatsby build 創建了 index.html 所在的公用文件夾。 當我在 github 頁面上部署頁面時，路由也不起作用。

概括：

1. 開發版工作正常
2. 生產和部署版本有問題：
   • 當我單擊下拉菜單時，下拉菜單未打開，並且 # 符號添加到 URL 地址 - www.website.com/#
   • 當我添加到網站地址 360-viewer 時，頁面正在打開，但是當我再次單擊下拉菜單時，# 符號再次添加到 URL -www.website.com/360-viewer/#

Answer 1

您的應用程序在生產中使用 Github 頁面中斷，因為與本地主機不同， 它不是從根 URL 提供的。 要解決此問題，您可以讓 Gatsby 知道您的應用程序將從哪個路徑提供服務。 然后 Gatsby 將為您修復路由和鏈接。

在gatsby-config.js ：

module.exports = {
  pathPrefix: "/your-repo-name",
}

然后將--prefix-paths標志添加到您的構建命令中： gatsby build --prefix-paths

他們在他們的文檔中對此進行了更多解釋： https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages