Search code examples
javascriptgatsbyroutelink

How to make my gatsby link work properly in netlify?

I am trying to route between pages in gatsby. It works in local host but sadly not in netlify.
The route link is My-site.com/about/ It doesn't work in netlify but when I reload the page the route become My-site.com/About/ and the page content shows.

In my index.js

function Home = () => {
  return (
       <Link to="/about/"> About Page </Link>
  );
};
export default Home;

In About.js

function About = () => {
  return (
      <h2> This is About page </h2>
  );
};
export default About
Solution

  • Your About.js file should be named about.js (lowercased). This is because with Gatsby, components under src/pages become pages automatically with paths based on their filename.

    You can check Pages and Layout documentation for further information.