Gatsby Links failure after deployment on github pages

。_饼干妹妹 提交于 2021-01-28 13:49:33

问题


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

For deployment I use https://www.npmjs.com/package/gh-pages.

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.

Summary:

  1. development version works fine
  2. production and deployed version have problems :
    • when I click on the dropdown, the dropdown menu doesn't open and # sign is added to the URL address - www.website.com/#
    • when I add to the website address 360-viewer the page is opening but when I click again on the dropdown menu, the # sign is added again to the URL -www.website.com/360-viewer/#

回答1:


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.

In gatsby-config.js:

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

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



来源:https://stackoverflow.com/questions/62318100/gatsby-links-failure-after-deployment-on-github-pages

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!