Dynamic routes: detect dynamic component
Answered
Amur catfish posted this in #help-forum
Amur catfishOP
I'm using dynamic routes to feed pages to different clients (e.g. site/client1/event, site/client2/events) and the client part of the route is dynamically-configured: (app/[client]/events). I'm using the App Router rather than API Router.
In some of my components I'm looking at the current route/path and trying to identify the current route by comparing against known sections (like 'events', 'visitors') so I'm initially stripping one part of the path (the dynamic [client] part) so I can see if we're on the /events page for example. This is not the best solution, especially if I want to have a global page for all clients, which won't have the dynamic part of the route (like an /about page).
I can't use a login method of identifying clients as they will have public-facing pages that are meant to be accessible to anyone that is given the url to their home page.
Is there a way to detect whether the current route has dynamic components at all? For example, if I have /app/[client]/events and the page is viewed as https://localhost:3000/client-name/events can I tell that the route has a dynamic component (and can therefore exclude it in any comparison checks) by looking at the request before it's delivered?
Maybe I'm going about this the wrong way!
In some of my components I'm looking at the current route/path and trying to identify the current route by comparing against known sections (like 'events', 'visitors') so I'm initially stripping one part of the path (the dynamic [client] part) so I can see if we're on the /events page for example. This is not the best solution, especially if I want to have a global page for all clients, which won't have the dynamic part of the route (like an /about page).
I can't use a login method of identifying clients as they will have public-facing pages that are meant to be accessible to anyone that is given the url to their home page.
Is there a way to detect whether the current route has dynamic components at all? For example, if I have /app/[client]/events and the page is viewed as https://localhost:3000/client-name/events can I tell that the route has a dynamic component (and can therefore exclude it in any comparison checks) by looking at the request before it's delivered?
Maybe I'm going about this the wrong way!
Answered by Amur catfish
😄 I had my /about directory in the wrong place, which caused additional confusion!
I appreciate your help, now I'll go sit in the corner and contemplate my failings... 👍
I appreciate your help, now I'll go sit in the corner and contemplate my failings... 👍
5 Replies
In server components then the page.tsx’s params prop should be the same
@joulev In server components then the page.tsx’s params prop should be the same
Amur catfishOP
You are right, thank you for that! I am using useParams to extract that dynamic component. In asking the question (and getting your answer) I think I have the answer I need for my problem. For example, site.com/about should not be classed as a client homepage. But dynamic routing will see the first path component and match to the dynamic route [client]. I guess I need to make sure that the client homepage is site.com/client/home rather than just site.com/client. In that way I can work out that site.com/about is not a client page but a top-level global page for all clients.
@Amur catfish You are right, thank you for that! I am using useParams to extract that dynamic component. In asking the question (and getting your answer) I think I have the answer I need for my problem. For example, site.com/about should not be classed as a client homepage. But dynamic routing will see the first path component and match to the dynamic route [client]. I guess I need to make sure that the client homepage is site.com/client/home rather than just site.com/client. In that way I can work out that site.com/about is not a client page but a top-level global page for all clients.
app/
about/
page.tsx <- 1
[client]/
page.tsx <- 2Not sure what your question is but if you have a file structure like this then navigating to /about will load the page.tsx file number 1 not number 2.
@joulev
app/
about/
page.tsx <- 1
[client]/
page.tsx <- 2
Not sure what your question is but if you have a file structure like this then navigating to /about will load the page.tsx file number 1 not number 2.
Amur catfishOP
😄 I had my /about directory in the wrong place, which caused additional confusion!
I appreciate your help, now I'll go sit in the corner and contemplate my failings... 👍
I appreciate your help, now I'll go sit in the corner and contemplate my failings... 👍
Answer