this.props.url: undefined

[michaeljonathanblack]

Am I doing something wrong?

import React from 'react';
import Layout from '../components/Layout';

export default class Blog extends React.Component {
  render() {
    // this.props.url.query.slug
    console.log(`this.props: ${JSON.stringify(this.props, null, '\t')}`);
    return (
      <Layout>
        <p>This is a blog.</p>
      </Layout>
    );
  }
}

When visiting this page, this is the response in the console:

> this.props: {}

I can define

  static async getInitialProps(props) {
    console.log(`props.query: ${JSON.stringify(props.query, null, '\t')}`);
    return props.query;
  }

and make the query available in the props as this.props.query.slug, but I don't believe this is necessary?

Thanks in advance for any help!

[michaeljonathanblack]

Hrm, it seems like the documentation for next-routes should be updated to reflect that this.props.url is deprecated:

https://github.com/zeit/next.js/blob/canary/errors/url-deprecated.md