How can define parallel routes in root layout?
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
can we define parallel routes in root layout and in root directory?
14 Replies
@Marchy Yes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Standard Chinchilla
I have an issue too,
when I wanna create parallel route on rootLayout, I have an error.
but when I create parallel route on another layout its correct
when I wanna create parallel route on rootLayout, I have an error.
but when I create parallel route on another layout its correct
@Marchy Yes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Brown bearOP
thanks. but i have an issue when implement example on this link
here is my architecture :
--app
--@navbar
---page.tsx
--layout.tsx
--page.tsx
and with this code in layout :
but that's not working.
when i navigate in
i don't see navbar.
here is my architecture :
--app
--@navbar
---page.tsx
--layout.tsx
--page.tsx
and with this code in layout :
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout(props: {
children: React.ReactNode;
navbar: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<div>
{props.children}
</div>
<div>
{props.navbar}
</div>
</body>
</html>
);
}but that's not working.
when i navigate in
/i don't see navbar.
@Brown bear thanks. but i have an issue when implement example on this link
here is my architecture :
--app
--@navbar
---page.tsx
--layout.tsx
--page.tsx
and with this code in layout :
js
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout(props: {
children: React.ReactNode;
navbar: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<div>
{props.children}
</div>
<div>
{props.navbar}
</div>
</body>
</html>
);
}
but that's not working.
when i navigate in
bash
/
i don't see navbar.
hmm, this renders as expected for me
// ./app/layout.js
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function RootLayout({ children, navbar }) {
return (
<html lang="en">
<body>
{navbar}
{children}
</body>
</html>
);
}// ./app/@navbar/page.jsx
export default function Navbar() {
return <p>Navbar Render</p>;
}Is your navbar the default export?
Brown bearOP
yes, but still not working
here is my codes:
and this is my navbar
here is my codes:
//app -> layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout(props: {
children: React.ReactNode;
navbar: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{props.children}
{props.navbar}
</body>
</html>
);
}and this is my navbar
//app/@navbar/page.tsx
const Navbar = () => {
return <div>Nav Bar </div>;
};
export default Navbar;my next version is 13.5.1 @Marchy
it's ok?
it's ok?
@Brown bear my next version is 13.5.1 <@203709756689350656>
it's ok?
Your exact code works for me on the same version. There's something else that's causing the issue
@Marchy Your exact code works for me on the same version. There's something else that's causing the issue
Brown bearOP
i use online editor (stackblitz)
can it a failure reason?
can it a failure reason?
@Brown bear i use online editor (stackblitz)
can it a failure reason?
Standard Chinchilla
may be
@Standard Chinchilla may be
Brown bearOP
thanks
@Brown bear i use online editor (stackblitz)
can it a failure reason?
I had to stop the terminal and re-run
npx next dev and now it's workingBrown bearOP
@Marchy
i write my code in vscode and it's work
thanks
stackblitz is not a good choice for coding.
i write my code in vscode and it's work
thanks
stackblitz is not a good choice for coding.
Must be something weird with their environment