Next.js Discord

Discord Forum

layout.jsx Conditional rendering

Answered
Bordin posted this in #help-forum
Open in Discord
BordinOP
Hello, I am trying to make a layout.tsx render parallel routes based on the URL
meaning if i was in dashboard/AddItem i wanna render only the add item form in the dashboard.
"use client";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { useRouter } from "next/router";
const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
  AddCategory,
}: Readonly<{
  children: React.ReactNode;
  AddCategory: React.ReactNode;
}>) {
  const router = useRouter();
  const { pathname } = router;
  const isAddCategoryPage = pathname.endsWith("/addCategory");
  return (
    <html lang="en">
      <body className={inter.className} style={{ display: "flex" }}>
        <div>{children}</div>
        {isAddCategoryPage ? <div>{AddCategory}</div> : ""}
      </body>
    </html>
  );
}


However i am getting an error
Error: NextRouter was not mounted.

the error makes sense, but idk how to overcome it and im not sure if what i am doing is even good practice
Answered by Ray
then create the page at Dashboard/@AddCategory/AddCategory/page.tsx
View full answer

95 Replies

use the one from next/navigation with app router
use next/router when you are using page router
and use usePathname() hook for the current pathname
BordinOP
  const router = useRouter();
  const isAddCategoryPage = router.usePathname();
usePathname doesnt exist
@Bordin usePathname doesnt exist
Ray
no
import { usePathname } from 'next/navigation'
BordinOP
ah i see
so i this good practice?
@Bordin so i this good practice?
Ray
I don't think it is good practice by marking the root layout because you can't use the metadata api with client component
BordinOP
http://localhost:3000/Dashboard/AddCategory
Ok it is working but i am getting page not found when going to this route.
which is understandable considering there is no page with such route.
but i was hopeing fot the layout to render and then render the form addcategory in the dashboard
BordinOP
When i press "Add Category" Link, it takes me to /Dashboard/AddCategory
and i wanna add the addcategory form in the white space
without removing the dashboard
should i change the dashboard page to template?
@Bordin without removing the dashboard
Ray
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className} style={{ display: "flex" }}>
        <div>{children}</div>
      </body>
    </html>
  );
}
and rename Dashboard/@AddCategory/page.tsx to Dashboard/AddCategory/page.tsx
BordinOP
the dashboard gets removed
when i go addcategory
it needs to stay
Ray
where is dashboard?
BordinOP
/Dashboard/page.tsx
Ray
oh ok
BordinOP
yes
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
import Dashboard from "./page";
export default function RootLayout({
  children,
  Dashboard,
}: Readonly<{
  children: React.ReactNode;
  Dashboard: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className} style={{ display: "flex" }}>
        <div>{Dashboard}</div>
        <div>{children}</div>
      </body>
    </html>
  );
}

i tried doing this but it still doesnst work
Ray
then create the page at Dashboard/@AddCategory/AddCategory/page.tsx
Answer
BordinOP
why?
@Bordin why?
Ray
because you are trying to use parallel route?
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
BordinOP
not working
@Bordin not working
Ray
could you show a screenshot of your folder structure
BordinOP
nvm i fixed it
Ray
is that what you want?
BordinOP
nope, its not working on reload
BordinOP
i tried that
it didnt work
Ray
try again
and show the error here
BordinOP
addcategory page isnt rendering
and when i reload
it returns 404
Ray
show the Dashboard/layout.tsx
BordinOP
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
  children,
  Dashboard,
}: Readonly<{
  children: React.ReactNode;
  AddCategory: React.ReactNode;
  Dashboard: React.ReactNode;
}>) {
  return (
    <>
      {Dashboard}
      <div>{children}</div>
    </>
  );
}
`
@Bordin tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] }); export default function RootLayout({ children, Dashboard, }: Readonly<{ children: React.ReactNode; AddCategory: React.ReactNode; Dashboard: React.ReactNode; }>) { return ( <> {Dashboard} <div>{children}</div> </> ); } `
Ray
ok change this
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
  children,
  AddCategory,
}: Readonly<{
  children: React.ReactNode;
  AddCategory: React.ReactNode;
}>) {
  return (
    <>
      {AddCategory}
      <div>{children}</div>
    </>
  );
}
the slot is @AddCategory now
BordinOP
404
for both dashboard and dashboard/addcategory
@Bordin for both dashboard and dashboard/addcategory
Ray
add this
// Dashboard/@AddCategory/default.tsx
export default function Default() {
  return null
}
Dashboard/@AddCategory/default.tsx
BordinOP
okay
it works but 404 on reload
@Bordin it works but 404 on reload
Ray
which url were you at?
BordinOP
/dashboard/additem
Ray
you dont have additem route?
BordinOP
i mean addcategory
mb
@Bordin i mean addcategory
Ray
ok add this
// Dashboard/default.tsx
export { default } from './page'
BordinOP
still..
wait
thats weird
@Bordin thats weird
Ray
you mean the styles are gone?
BordinOP
ye
Ray
where do you import the style?
BordinOP
scss
Ray
yea where are you importing it?
BordinOP
import "../scss/DashboardPage.scss";
in dashboard/page.tsx
Ray
you should import on layout
Dashboard/layout.tsx
BordinOP
eyy it works
thank you Ray!
@Bordin thank you Ray!
Ray
np
BordinOP
but
can you explain whats happening plz
Ray
about the style?
BordinOP
why did we need two @Addcategory and AddCategory folders
Ray
oh
BordinOP
why did we need default.tsx inside @AddCategory not inside AddCategory?
Ray
read the doc, too much detail :lolsob:
BordinOP
why did we need page.tsx inside AddCategory not inside @AddCategory x.x
Okay fairwell, thank you for your help and time
idk how to add solved to the post
there isnt an "Apps" option when i rightclick
Ray
I'll do it