Anchor links in GatsbyJS + React

Question

I have been stuck on this problem for a while now. I created a GatsbyJS project after I made my project in a normal create-react-app. Everything worked fine until I made some big changes to the code. This ruined my navigation - BUT NOT COMPLETELY, The logo navigation still works and the links in the footer. but not the NavBar items: I'm using the gatsby plugin: 'gatsby-plugin-anchor-links' ( https://www.gatsbyjs.com/plugins/gatsby-plugin-anchor-links/ ).

Here is my NavBarItem code (component):

import React from "react"
import "../../Bulma.css"
import { Link } from "gatsby"

function NavBarItem(props) {
  return (
    <Link
      className={"pl-6 pr-6 has-text-black navbar-item " + props.class}
      to={"/#" + props.location}
    >
      {props.text}
    </Link>
  )
}

export default NavBarItem

Here is my NavBar component:

import React from "react"
import NavBarItem from "./assets/NavBarItem"
import "../Bulma.css"
import "./NavBar.css"
import { Link } from "gatsby"
import logo from "../../static/dronarfoton_logo.png"

class NavBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isActive: true,
    }
  }

  toggle() {
    this.setState({ isActive: !this.state.isActive })
  }

  render() {
    return (
      <nav
        className="navbar has-text-white has-background-grey-lighter has-navbar-fixed-top is-fixed-top"
        role="navigation"
        aria-label="main navigation"
      >
        <div className="navbar-brand">
          <a href="#Top" className="navbar-item">
            <img
              alt="Logga som det står DrönarFoton på. Det visar en drönare och text."
              src={logo}
              width="112"
              height="28"
            />
          </a>

          <a
            role="button"
            className={
              this.state.isActive
                ? "navbar-burger burger"
                : "is-active navbar-burger burger"
            }
            aria-label="menu"
            aria-expanded={this.state.isActive ? "false" : "true"}
            data-target="navbarBasicExample"
            onClick={this.toggle.bind(this)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div
          className={this.state.isActive ? "is-active navbar-menu" : "is-block"}
        >
          <div className="navbar-end">
            <NavBarItem location="Top" text="Hem" />
            <NavBarItem location="OmOss" text="Om oss" />
            <NavBarItem location="Kontakt" text="Kontakt" />
            <NavBarItem class="is-disabled" location="#" text="❌ Galleri ❌" />
          </div>
        </div>
      </nav>
    )
  }
}

export default NavBar

Again, the 'navbar-brand' link WORKS but not the navbar items.

My thought was that it has something to do with how it's rendered, but I can't figure out how & why this is happening.

Another interesting part is that THE LINKS WORK IF I DISABLE JAVASCRIPT IN MY BROWSER

If someone has an idea of why this is happening. Please let me know.

Thanks //Gustav

Answer 1

You are using a prop location in your <NavBarItem> component but in the end, you are rendering a <Link> , that doesn't accept hashes ( # ) neither an anchor behavior. As you can see in <Link> 's API documentation (in-app navigation) :

Neither <Link> nor navigate can be used for in-route navigation with a hash or query parameter. If you need this behavior, you should either use an anchor tag or import the @reach/router package—which Gatsby already depends upon—to make use of its navigate function.

If you want to use an anchor link in your <NavBarItem> , you should use a regular <a> or using gatsby-plugin-anchor-links properly:

  <AnchorLink
    to="/about#team"
    title="Check out our team!"
    className="stripped"
    stripHash
  />

Keep in mind that using a regular <a> , you will lose all the benefits on the @reach/routing and you will refresh the page completetly.