0

I am currently using Gatsby and @reach/router

I would like to link my about page to '/profile'

my router looks like:

<Router>
  <Home path="/" />
  <About path="/profile" />
  <Blog path="/blog" />
  <Contact path="/contact" />
</Router>

Why is my about page being shown on '/about' and not '/profile'?

Also, where do you put your Router Component? Currently, the code above is my app.js file. Is this best practice?

Matt Park
  • 151
  • 5
  • Gatsby does routing by the name of your Page. So if you create a component by the name about.js in Page folder, the route will be created for /about and that will serve the about page – Shubham Khatri Apr 26 '20 at 05:08
  • Have you tried? https://reach.tech/router/example/basic changing "path" to "to". – Theorder Apr 26 '20 at 04:13

1 Answers1

0

The only way I was able to get @reach/router working with Gatsby was to have all my routes going through a High Order Component like so. Also I have the Router nested inside my Layout wrapper. Remember any js in the pages folder will get served up by itself (No footers/headers or anything will carry over), so if this is for a SPA you should only have the index.js in the pages folder. If you need more checkout this repo: https://github.com/foestauf/gatsby-starter-default-SPA I didn't create this but I can't remember where I found it, this is what finally made Gatsby SPA click for me.

import { Router } from "@reach/router"

const LazyComponent = ({ Component, ...props }) => (
  <React.Suspense fallback={"<p>Loading...</p>"}>
    <Component {...props} />
  </React.Suspense>
)

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <Link to="/">Home</Link>
    <Link to="/contact/">Contact</Link>
     <Link to="/about-us/">About Us</Link>
    <Router>
      <Home path="/" />
      <LazyComponent Component={Contact} path="contact" />
      <LazyComponent Component={About} path="about-us" />
    </Router>
  </Layout>
)
Rob McKee
  • 98
  • 1
  • 4