get query object by Router.query empty in 9.2.1

Bug report

get query object by Router.query empty in 9.2.1

Describe the bug

when i use dynamic-routing, i come across that bug, I would get query object by Router.query in componentDidMount func; like this public componentDidMount() { console.log(‘Router.query’, Router.query); } the query is empty

To Reproduce

Go to example/dynamic-routing modify the comment.js like as:

import Router from 'next/router';
class Comment extends React.Component<{}, {}> {
    public componentDidMount() {
       console.log('Router.query', Router.query);
    }
    public render() {
      return (
        <>
          <h1>Post</h1>
        </>
      );
    }
  }

Expected behavior

get query object by Router.query

System information

• OS: macOS
• Browser : chrome
• Version of Next.js: 9.2.1

[minlare]

If like me, you are using getStaticProps, the docs state:

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

This means you can watch router.query in useEffect to check the params like so:

const router = useRouter();
useEffect(() => {
  console.log(router.query);
}, [router.query]);

Or watch for a specific param:

const router = useRouter();
useEffect(() => {
  console.log(router.query.myParam);
}, [router.query.myParam]);

[ivanhoe-dev]

I just fixed the issue by changing my own code. I move the router.query related code from constructor to render function. It seems because when refreshing page, the router.query is empty initially. After I put it in the render function, it will re-render the page after router.query is updated.