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:
- development version works fine
- 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/#