Nested routes

[Jexim]

Hi everyone. I came to next.js after nuxt.js and I have question about nested routes.
For example I have structure pages:

--pages
----article
------[id]
---------index.js -> /article/[id]/
---------edit.js -> /article/[id]/edit
---------statistic.js -> /article/[id]/statistic

And I need common component for article (where I get article data) and it will be parent component for pages (index, edit, statistic) and will not reload after I change router inside (example: /article/[id]/ -> /article/[id]/edit). I know about I can use common parent component but it will be reload when I change inside router.

I need some like this https://nuxtjs.org/guide/routing#nested-routes

--pages
----article
------[id]
---------index.js -> /article/[id]/
---------edit.js -> /article/[id]/edit
---------statistic.js -> /article/[id]/statistic
------[id].js -> common component (for example how its working in nuxt).

How can I do functional like this?

[kachkaev]

I know about I can use common parent component but it will be reload when I change inside router.

Are you sure this the case? Try rendering const rnd = useMemo(Math.random, []) in your parent component and see if the number changes if you jump between pages. From my understanding, if the pages are not wrapped in different hocs, the component instance may actually remain 🤔