CODEWITHSUNDEEP
reactjsnext.js
neaumusic
neaumusic

Reputation: 10474

How Next.js routes are mapped to props.url?

As seen in README.md, I'm trying to access this.props.url, but it's undefined, and I'm not sure how the component is supposed to get next-routes props. I would expect a connect or withRouter etc, but I've never seen props.url, and can't find any import mentioned in README.md.

How am I supposed to get this.props.url?

enter image description here

Upvotes: 0

Views: 1188

Answers (2)

Tibi02
Tibi02

Reputation: 697

You have to return a url object in getInitialProps then you can access the query in the render function.

export default class Blog extends React.Component {
  static async getInitialProps ({ query }) {
    return { url: { query } }
  }
  render () {
    // this.props.url.query.slug
  }
}

Upvotes: 3

LMulvey
LMulvey

Reputation: 1680

I feel like this is a typo in the docs for next-routes. That package hasn't been maintained in quite a few months now and has not been updated for Next v7 or greater. Last supported was ^6.0.0.

Anyways, in NextJS, it should be attached via use of the withRouter HOC exported from next/router. Once you attach that, your query will exist on this.props.router.query.

Upvotes: 3

Related Questions