Help with dynamic routing

[Paultje52]

Hello. I want to use dynamic routing in my project. I have a class that extends react.Component and I export it using next/router by using withRouter. The filename is [...page].js.z

class Page extends Component {
  constructor(props) {
    super(props);
    console.log(props.router.query.page);
  }
  // ....
}
export default withRouter(Page);

The problem is that when I reload the page, I get undefined in the console. To get the right page variable in my console, I have to change something in the constructor so the component gets "reloaded".

When reading the Caveats section in the docs, I read this.

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.

But how do I get that update? I'm using next.js 11 and I'm in dev-mode (npm run dev).

[adebiyial]

Hey. Read this https://www.smashingmagazine.com/2021/06/client-side-routing-next-js/

[adebiyial]

What you need to do is inspect element in your browser and see if the img is been targeted. And also check if the class names are been properly attached to the necessary elements.

[Paultje52]

I'm sure that it's correct, because the only thing I changed was the element name, from Image to img and then everything was correct

[adebiyial]

But you have to debug through the DOM. At least check to see what's been rendered.

[Paultje52]

[adebiyial]

So what's happening is that next/image' has some styles that is overriding yours. insetoverrides yourtopandleft. margincancelsmargin-top`.

My verdict is that you let next/image take care of those styles so it can work as intended, or if you need to override it's styles, then you can apply !important to your own styles.

Or use the Inline style on Image