next.js and dynamic routing not displaying any page content
Answered
New Guinea Freshwater Crocodile posted this in #help-forum
New Guinea Freshwater CrocodileOP
Howdy folks,
I'm having a problem with my dynamic routing not displaying any data.
A layout component creates a <ul>
clicking on the link should dislay the dashboard component that is passed into the store page.tsx, but i'm constantly hitting my 404 page instead.
screenshot of my file structure also included. using next.js 14 I believe so the dynamic folder structure needs to be
I'm having a problem with my dynamic routing not displaying any data.
A layout component creates a <ul>
<ul role="list" className="-mx-2 mt-2 space-y-1">
{stores?.map((store) => (
<li key={store.sk}>
<Link
href={`store/${store.storeId}`}
className="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
>
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
height="2.5em"
width="2.5em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
d="M448 448V240m-384 0v208M382.47 48H129.53c-21.79 0-41.47 12-49.93 30.46L36.3 173c-14.58 31.81 9.63 67.85 47.19 69h2c31.4 0 56.85-25.18 56.85-52.23 0 27 25.46 52.23 56.86 52.23s56.8-23.38 56.8-52.23c0 27 25.45 52.23 56.85 52.23s56.86-23.38 56.86-52.23c0 28.85 25.45 52.23 56.85 52.23h1.95c37.56-1.17 61.77-37.21 47.19-69l-43.3-94.54C423.94 60 404.26 48 382.47 48zM32 464h448M136 288h80a24 24 0 0 1 24 24v88h0-128 0v-88a24 24 0 0 1 24-24zm152 176V312a24 24 0 0 1 24-24h64a24 24 0 0 1 24 24v152"
></path>
</svg>
</span>
<span className="truncate">{store.storeName}</span>
</Link>
</li>
))}
<li>
<Link
href="/dashboard/onboarding"
className="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
>
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600">
+
</span>
<span className="truncate">Add a Store</span>
</Link>
</li>
</ul>clicking on the link should dislay the dashboard component that is passed into the store page.tsx, but i'm constantly hitting my 404 page instead.
"use client";
import Dashboard from "../../dashboard/page";
export default function dynamicStoreDisplay() {
return (
<>
<Dashboard />
</>
);
}screenshot of my file structure also included. using next.js 14 I believe so the dynamic folder structure needs to be
[...dynamicRoute] but it's not having the desire effect.Answered by gin
/app is basically your router, i would remove every other folder related to your components or whatever
35 Replies
/app is basically your router, i would remove every other folder related to your components or whatever
Answer
folders starting with
_ is just so nextjs doesnt use it for routing but its a very bad convention to doNew Guinea Freshwater CrocodileOP
@gin tried to but keeps telling me app didn't respond. I have another question sort of related.
my route is now showing the dashboard I intend it to show, but it's not apart of the main dashboardLayout that holds the other children of the application, how can I ensure that this route is also part of the main layout>?
my route is now showing the dashboard I intend it to show, but it's not apart of the main dashboardLayout that holds the other children of the application, how can I ensure that this route is also part of the main layout>?
New Guinea Freshwater CrocodileOP
ya
i know its not shwoing the main layout because it only returns the one component, but how can I treat it like the other children of the app?
show me your full folder structure
of app/
New Guinea Freshwater CrocodileOP
so store uses dashboard
dashboard already displays in main layout but if you select a store, the dashboard exists alone
ideally I just want the dynamic store to replace the dashboard in the main layout
nono
this is wrong
you ideally dont want to render your default exports from a page.tsx
this messes everything up
if u want to render the Dashboard component in your store u gotta move it to your components folder and render it from there
your page.tsx and layout.tsx is for routing and dynamic stuff only
your actual content shouldnt be in app/
New Guinea Freshwater CrocodileOP
so move that to the components folder and then obviously replace the dashboard references in the mainlayout with the store reference
@New Guinea Freshwater Crocodile so move that to the components folder and then obviously replace the dashboard references in the mainlayout with the store reference
move your actual page content to components and render it in your page.tsx
so:
components/MainDashboard
app/dashboard/page.tsx -> renders MainDashboard
app/[...store]/page.tsx -> renders MainDashboard
components/MainDashboard
app/dashboard/page.tsx -> renders MainDashboard
app/[...store]/page.tsx -> renders MainDashboard
understandable?
its just a convention i follow
i never render content in page.tsx
and also keep page.tsx on the server
remove "use client"
New Guinea Freshwater CrocodileOP
yes, thank you!