React change component inside de main div based on Sidebar link - reactjs

Question

I`m beginner in React and I want to create page where I include a Navbar and Sidebar and the main to by changed by Sidebar link. How I do that?
exemple:
import Sidebar from '../Sidebar';
import Navbar from '../Navbar;
import {Page1,Page2,Page3} from './menu'
export default function UserPage(){
return(
<>
<Navbar />
<Sidebar />
<div>
//Here i want to component be loaded based on Navlink
</div>
</>
)
}
I found the problem!
If you keep the navbar or sidebar in path="/" don`t use exact in the route because when you will go to "/dashboard" he will not add them

Answer 1

Use a Router
For routing in react you can look up react router here
You then define your routes and that will fill your content based on url.
Example
See how this is like a normal react component, each route will load some specified components. Anything that exists on every page can be put outside of the Switch component. You cna see the Nav bar here that will exist on every page.
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}