Next.js Discord

Discord Forum

help needed routing/linking

Unanswered
Northern Rough-winged Swallow posted this in #help-forum
Open in Discord
Northern Rough-winged SwallowOP
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

33 Replies

Northern Rough-winged SwallowOP
😭
Northern Rough-winged SwallowOP
the parent layout which is correct or the child layout which gives me the error
Eurasian Wigeon
the layout.tsx you have in the folder /blog
Northern Rough-winged SwallowOP
export default function RootLayout({children}: {children: any }) {
  return (
    <div>
      {children}
    </div>
  );
}
this
Eurasian Wigeon
and now the one for /
Northern Rough-winged SwallowOP
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>
   )
}
Eurasian Wigeon
and page.tsx that contains the Link component?
Northern Rough-winged SwallowOP
export default function Body(){
  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
Eurasian Wigeon
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
Northern Rough-winged SwallowOP
ive been googling and chagpting this stuff and either im deep in SSR CSR rabbit hole or im just missing a else somewhere
Eurasian Wigeon
might be inheriting shit from your / page
@Eurasian Wigeon might be inheriting shit from your / page
Northern Rough-winged SwallowOP
the parent or child page ?
@Northern Rough-winged Swallow the parent or child page ?
Eurasian Wigeon
/ is the parent
/blog is the child
Northern Rough-winged SwallowOP
yes
Eurasian Wigeon
yes?
Northern Rough-winged SwallowOP
oh mb i get it
but how would taht work
nextjs doesnt cascade page.tsx right its just for layout.tsx
Eurasian Wigeon
yeah that’s what I thought but your browser might be doing funky stuff
Northern Rough-winged SwallowOP
ive tried all browsers edge chrome firefox
Eurasian Wigeon
try using incognito and seeing if that behaves differently
Northern Rough-winged SwallowOP
its the same behavoiur ive tried
Eurasian Wigeon
idk then I’m still pretty new as well
can’t even get my damn page to refresh automatically
Northern Rough-winged SwallowOP
huh
im thining i should try modularizign my css
Northern Rough-winged SwallowOP
@Eurasian Wigeon i fixed it
css scoping working