部署在github页面上后的盖茨比链接失败 [英] Gatsby Links failure after deployment on github pages

问题描述

我在Gatsby(我的第一个网站)中创建了网站，但在部署页面上的 Gatsby链接上遇到了麻烦.我正在使用 gatsby-starter-react-bootstrap ，顾名思义，其中包括gatsby和react-bootstrap :)我在 NavDropdown.Item 中找到了Links，这是react-bootstrap的一个元素.

I created website in Gatsby (my first one) and I have trouble with the Gatsby's Link on the deployed page. I am using a gatsby-starter-react-bootstrap which includes gatsby and react-bootstrap as the name says :) I located Links in the NavDropdown.Item which is an element of the 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.

在本地主机上本地运行的开发版本:8000可以正常运行.下拉菜单和所有链接均正常运行.当我尝试将版本用于生产时，路由停止工作-gatsby构建会在index.html上创建公用文件夹.当我在github页面上部署页面时，路由也不起作用.

Development version run localy on localhost:8000 works totaly fine. Dropdown and all of the links work perfectly. Routing stops to work when I try to use version for production - gatsby build creates public folder where is index.html. Routing doesn't work also when I deploy page on the github pages.

摘要:

1. 开发版本工作正常
2. 生产和部署版本存在问题:
   • 当我单击下拉列表时，下拉菜单不会打开，并且#符号已添加到URL地址-www.website.com/#
   • 当我将网站地址添加到360-viewer时，页面正在打开，但是当我再次单击下拉菜单时，#符号再次添加到URL -www.website.com/360-viewer/#

推荐答案

您的应用程序因Github Pages停产，因为与localhost不同，

Your application breaks in production with Github Pages because, unlike localhost, it's not served from the root URL. To fix this, you can let Gatsby know from which path your application will be served. Gatsby will then fix the routing and links for you.

在 gatsby-config.js 中:

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

然后在您的构建命令中添加-prefix-paths 标志: gatsby build --prefix-paths

Then add --prefix-paths flag to your build command: gatsby build --prefix-paths

他们在文档中对此进行了更多解释:

They explain this a bit more in their docs: https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages

这篇关于部署在github页面上后的盖茨比链接失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！