Gatsby Links failure after deployment on github pages

Question

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/#

Answer 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