Gatsby: Passing variables through route

Created on 15 Jun 2017  ·  10Comments  ·  Source: gatsbyjs/gatsby

hi all,

pardon me if this is a silly question. how can I pull variables from the route / url? for example:

www.example.com/blog/this-is-the-title

can I pull the title into a variable?

stale?

Most helpful comment

Never mind! I was missing this in my gatsby-node.js:

// Implement the Gatsby API “onCreatePage”. This is // called after every page is created. exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions // Make the front page match everything client side. // Normally your paths should be a bit more judicious. if (page.path === `/`) { page.matchPath = `/*` createPage(page) } }

All 10 comments

Hey @jonathan-chin, I haven't actually used Gatsby much yet, but it uses react-router under the hood, so it should be passing the location to the the route component in this case your page component. I'm take a look at this https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md.

Thanks but part of what I'm struggling with is configuring the routes to
components. Gatsby does so much of it magically that I'm not sure where to
customize them.

On Jun 16, 2017 6:41 AM, "Craig Mulligan" notifications@github.com wrote:

Hey @jonathan-chin https://github.com/jonathan-chin, I haven't actually
used Gatsby much yet, but it uses react-router under the hood, so it should
be passing the location to the the route component in this case your page
component. I'm take a look at this https://github.com/
ReactTraining/react-router/blob/master/packages/react-
router/docs/api/location.md.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/1171#issuecomment-308993675,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHK8tFXrK6q55uPO3K8EY-1kq8mudG1eks5sElvAgaJpZM4N6mET
.

@craig-mulligan it looks like I want to do something like this:

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#Route-props

Any ideas where I would make the additions in Gatsby?

@jonathan-chin hopefully you can find your answer there: https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths/src/pages/index.js

Edit: The link was dead. Thanks @nikhilag

Add a console.log(this.props) to your render method. The location data from react-router should be there.

@MarcCoet this looks almost exactly like what I need. let me try to incorporate it into my code. Thanks!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This isn't working for me - I even copied and pasted the code from @MarcCoet & @nikhilag's answer, and it keeps redirecting me to the Gatsby 404 page 😞

Never mind! I was missing this in my gatsby-node.js:

// Implement the Gatsby API “onCreatePage”. This is // called after every page is created. exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions // Make the front page match everything client side. // Normally your paths should be a bit more judicious. if (page.path === `/`) { page.matchPath = `/*` createPage(page) } }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

signalwerk picture signalwerk  ·  3Comments

rossPatton picture rossPatton  ·  3Comments

magicly picture magicly  ·  3Comments

andykais picture andykais  ·  3Comments

ghost picture ghost  ·  3Comments