How to use dynamic routes using component class

[danielpaz6]

Is there an example of Next.JS dynamic routes using component class?

I've read this part in next js docs:

https://nextjs.org/learn/basics/dynamic-routes

And I found this "principles":

But why would I want to give statically bind? I'll need to check in my server-side if the id is valid no? in which function should I check it?

At first, I thought of didComponentMount but I'm not sure anymore.

[nihiluis]

Did you try something like this? Only wrote it from memory, might be wrong (hope it's proper js)

import { withRouter } from "next/router"

class MyComp extends React.Component {
  componentDidMount() {
    const { id } = this.props.router.query
  }
}

export default withRouter(MyComp)

[nihiluis]

See https://nextjs.org/docs/api-reference/next/router#withrouter

[danielpaz6]

@nihiluis

I encounter a weird situation:

I have this code inside pages/room/[id].js:

import { withRouter } from "next/router";

class MyComp extends React.Component {
	componentDidMount() {
		const { id } = this.props.router.query;
		console.log(id);
	}

	render() {
		return <div>Test</div>;
	}
}

export default withRouter(MyComp);

And in the console.log I do see the id once. but when refreshing the page, it doesn't show anymore the id.

Why this weird situation happens?

But when I use this code:

import { useRouter } from "next/router";

const MyClassWithRouter = (props) => {
    const router = useRouter()

    console.log(router);

    return <div>Test</div>
}

export default MyClassWithRouter;

it does work, but it pops up console.log(router) twice from some reason