Next.js Discord

Discord Forum

How to route to a specific nested component?

Unanswered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
My objective is to route(scroll to component) to a specific section on the Next page. But that section is inside of a component rather than in the page.

For example:
Page - page.tsx
Component A(inside Page) - ComponentA.tsx
Component AA(inside Component A / Component A is the parent component) - ComponentAA.tsx

I want to show Component AA on a Link click, where Link is in another component of Component BA(that is of different parent component). How do I achieve this?

If it was to show Component A, I know we can use:
<Link href={/page/#componentA}></Link> where Component A id=#componentA
When it comes to a nested components, I'm in a bit trouble.

Can someone help me?
Any links to blogs or solutions to problem is much appreciated.

Thanks in advance!

5 Replies

alfon
You would have to separate Component AA and Component BA to a separate child route if you want to use the <Link> tag.

Otherwise, you could just create a useState() where you call the setter to display Component BA on button click inside Component AA
if you want to show
/page/componentA/componentAA
and
/page/componentA/componentBA
then you must create two folder under the 'componentA' folder
Holland LopOP
Folder structure is:
page
page.tsx
components
ComponentA
ComponentAA.tsx
ComponentAB.tsx
index.tsx
ComponentB
ComponentBA.tsx
ComponentBB.tsx
index.tsx

Button or the Link is in ComponentBA and on clicking that, I wanna show ComponentAA.

How would I implement this?

Thanks @alfon !
alfon
and how do you want to show it? pop up? switch?