Reactjs 基于侧栏链接对de main div内的组件进行响应更改

我是React的初学者，我想创建一个包含导航栏和侧边栏的页面，并通过侧边栏链接更改主至。我怎么做到的

例如：

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>
    </>
  )
}

从“../Sidebar”导入侧栏；
从“../Navbar”导入Navbar；
从“./菜单”导入{Page1，Page2，Page3}
导出默认函数UserPage（）{
返回(
//在这里，我想基于Navlink加载组件
)
}

我发现了问题 如果您将导航栏或边栏保留在path=“/”中，则不要在路线中使用精确的，因为当您进入“/dashboard”时，他不会添加它们

使用路由器 对于react中的路由，您可以查找

react路由器

然后定义路由，并根据url填充内容

例子 看看这是如何像一个正常的反应组件，每个路由将加载一些指定的组件。每个页面上存在的任何内容都可以放在

开关

组件之外。您可以在这里看到导航栏，它将出现在每个页面上

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>
  );
}

导出默认函数App（）{
返回(


家


关于


使用者


{/*A查看其子对象和
呈现与当前URL匹配的第一个URL.*/}
);
}

我试过了，但他把我送到了那个组件。我希望该组件进入包含导航栏和侧栏的容器中，而不是进入该组件