#help needed routing/linking

35 messages · Page 1 of 1 (latest)

true lark
#

when i use the <link> component to go to a page it works fine but when i use the direct link of the page the whole page collapses as is seen in the image how to keep the page from collapsing and maintain consistent behavoiur
im still learning nextjs please be kind

image.png image.png
midnight ospreyBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

true lark
#

help needed routing/linking

#

😭

edgy vault
true lark
#

the parent layout which is correct or the child layout which gives me the error

edgy vault
#

the layout.tsx you have in the folder /blog

true lark
# 

export default function RootLayout({children}: {children: any }) {
  return (
    <div>
      {children}
    </div>
  );
}
#

this

edgy vault
#

and now the one for /

true lark
#

ive been stuck for 2hrs ```

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Container >{children}</Container>
</body>
</html>
);
}

function Container({children}:{children : any})
{
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
)
}

edgy vault
#

and page.tsx that contains the Link component?

true lark
# 
  return(
    <Suspense fallback={<Skeleton className="w-[100px] h-[20px] rounded-full" />  }><>
      <App className="absolute left-0 !float-left"/>
      <Head/>
      <Link href="/blog" prefetch={false} >blog</Link> 
      <ModeToggle ></ModeToggle>
      {/* < Darkmodetoggle> */}
    </></Suspense>

  )
}
#

the page also renders collapsed if i reload after ive reached /blog

edgy vault
#

if you don’t have any other CSS that’s what it’s supposed to look like

#

idk why it shows up centered to begin with

true lark
#

ive been googling and chagpting this stuff and either im deep in SSR CSR rabbit hole or im just missing a else somewhere

edgy vault
#

might be inheriting shit from your / page

true lark
edgy vault
#

/blog is the child

true lark
#

yes

edgy vault
#

yes?

true lark
#

oh mb i get it

#

but how would taht work

#

nextjs doesnt cascade page.tsx right its just for layout.tsx

edgy vault
#

yeah that’s what I thought but your browser might be doing funky stuff

true lark
#

ive tried all browsers edge chrome firefox

edgy vault
#

try using incognito and seeing if that behaves differently

true lark
#

its the same behavoiur ive tried

edgy vault
#

idk then I’m still pretty new as well

#

can’t even get my damn page to refresh automatically

true lark
#

huh

#

im thining i should try modularizign my css

#

@edgy vault i fixed it