I have created group routes in my NextJs 14 application, it has a layout.jsx which has the following code:
export default function RootLayout({ children }) {
return (
<main
className={clsx(
"d-flex align-items-center justify-content-center",
styles.registration
)}
>
<div className={clsx("d-flex flex-column p-4 p-md-5", styles.card)}>
<div className="row align-items-center justify-content-center position-relative">
<button className={clsx("position-absolute", styles.backButton)}>
<FontAwesomeIcon icon={faArrowLeft} />
</button>
<div className={clsx(styles.logoContainer)}>
<Image src="/logo-wingtrill.svg" priority fill alt="Wingtrill" />
</div>
</div>
{children}
</div>
</main>
);
}So the layout.jsx has the back button which will be used for navigating to the previous route but I can only define the back route in the children itself because only here I know what will be th previous route so how do I pass the back route from children to this root layout for the back button.
I tried to print the children which gave me this
{
'$$typeof': Symbol(react.element),
type: [Function (anonymous)],
key: null,
ref: null,
props: {
parallelRouterKey: 'children',
segmentPath: [ 'children', '(registration)', 'children' ],
error: undefined,
errorStyles: undefined,
errorScripts: undefined,
template: {
'$$typeof': Symbol(react.element),
type: Symbol(react.fragment),
key: null,
ref: null,
props: [Object],
_owner: null,
_store: {}
},
templateStyles: undefined,
templateScripts: undefined,
notFound: {
'$$typeof': Symbol(react.element),
type: [Function],
key: null,
ref: null,
props: {},
_owner: null,
_store: {}
},
notFoundStyles: [],
styles: null
},
_owner: null,
_store: {}
}Nothing was usefull in this. I am new to NextJs. Any help will be appreciated.