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