Next JS, React have child component tell parent what to render - reactjs

Question

I am new to NextJS and React and want to create some dynamic routing. I have a parent page that is calling a child component which show some navigation.
In my parent component I have a layout that includes a header and right sidebar which will show on each page, but depending on the link that is clicked in my Nav component the body content will change.
My parent component:
import React from 'react';
import { Header } from './Header;
import { SubNav } from './SubNav;
import { Sidebar } from './Sidebar;
export const AboutPage = () => {
return (
<>
<Header />
<SubNav />
<div className="content">
>>>I want to do something like this <<<
{section === history && <History />}
{section === contact && <Contact />}
.....
</div>
<Sidebar />
</>
);
};
In my child Nav component I am mapping through some data that includes a 'value' for each different section that I have defined in an array.
<NavButtons
onClick={() => {
const path = AppRoute.ABOUT.replace(':section', 'value');
router.push(path, path, { shallow: true });
}}
/>
The page routes correctly with the value of the section changing each time I click on a different Navigation button but I can't get the content to change in the parent component, I have tried creating a function in the parent that will get the value from the child so that I can use it to define the sections in the parent, but it ends up creating an infinite loop. Confused on how to get the two to work together.

Answer 1

You can detect the pathname with the useRouter Hook.
Then you can check in a switch case statement which site the user is on and render the components for the route.
import { useRouter } from next/router
Inside the component
const router = useRouter();
The function to return the component
function renderSidebar(pathname){
switch(pathname){
...
}
Inside the render function
{ renderSidebar(router.pathname) }
See further usage in the NextJS docs
https://nextjs.org/docs/api-reference/next/router

Answer 2

import React from 'react';
import {useState} from 'react';
import { Header } from './Header';
import { SubNav } from './SubNav';
import { Sidebar } from './Sidebar';
export const AboutPage = () => {
const [section,setSection] = useState()
sectionHandler = (section) => {
setSection(section)
}
return (
<>
<Header />
<SubNav />
<div className="content">
>>>I want to do something like this <<<
{section === history && <History />}
{section === contact && <Contact />}
.....
</div>
<Sidebar />
</>
);
};
and in your child comp
<NavButtons
onClick={() => {
const path = AppRoute.ABOUT.replace(':section', 'value');
props.sectionHandler(section)
router.push(path, path, { shallow: true });
}}
/>
don't forget to pass sectionhandler from parent to child comp