在 github 页面上部署后 Gatsby 链接失败

Question

我在 Gatsby 中创建了网站（我的第一个网站），但我在部署页面上遇到了 Gatsby 的 Link 的问题。我正在使用 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 构建创建 public 文件夹，其中 index.html。当我在 github 页面上部署页面时，路由也不起作用。

总结：

开发版工作正常
生产和部署版本有问题：
- 当我点击下拉菜单时，下拉菜单没有打开，# 号被添加到 URL 地址 - www.website.com/#
- 当我添加到网站地址 360-viewer 时，页面正在打开，但是当我再次单击下拉菜单时，# 符号再次添加到 URL -www.website。com/360-viewer/#

Answer 1

您的应用程序在 Github 页面的生产中中断，因为与本地主机不同，it's not served from the root 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

在 github 页面上部署后 Gatsby 链接失败

Gatsby Links failure after deployment on github pages

deployment

hyperlink

github-pages

reactjs

gatsby