CODEWITHSUNDEEP
reactjsroutesgatsbyserver-side-renderingreach-router
Junaid Nazir
Junaid Nazir

Reputation: 383

Gatsby: page not rendering when I pass parameters in URL [Help]?

Im stuck at this thing. I want to get url parameter (/mypage/?title=my-title) from url and display it in the page. Currently I tried client-only routes in gatsby

import path from "path"
exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
    if (page.path.match(/^\/headline\/*/)) {
      createPage({
        path: "/headline",
        matchPath: "/headline/*",
        component: path.resolve("src/templates/headline.tsx"),
    })
  }
}
// gatsby-node.js

Here is my template

    import React  from "react"
    import { Router, RouteComponentProps } from "@reach/router"
    
    type Props = RouteComponentProps<{
      title: string
    }>
    const Test = ({ title = "Test title", location }: Props) => {
      console.log(title)
      console.log(location)
      return <h1>Im test</h1>
    }
    
    const Headline = () => {
      console.log("handle temp called")
      return (
        <Router>
          <Test path="/compare/headline/:title" />
        </Router>
      )
    }
    export default Headline
    // src/templates/headline.tsx

Nothing is rendering when I hit the /headline/?title=test-my-app My component (Test) is not being called from Router tag. Any help ?

Upvotes: 0

Views: 818

Answers (1)

ehrencrona
ehrencrona

Reputation: 6982

I think the issue is simply that you have an extra "compare" in your URL in the router. If you replace the part inside Router with <Test path="headline/:title" /> it ought to work with the URL you are testing.

The router will return an empty page if the path does not match any of the paths specified. You can add a default route as a catch-all.

Normally you shouldn't need to create a router inside the page by the way, but I guess that depends on your use case.

Upvotes: 1

Related Questions