Reactjs React router dom 6 和 bootstrap 2.5 nav 链接渲染整个应用程序

当我点击导航时.链接在我的SPA应用程序中，整个页面重新呈现，但我只希望UI主要部分中的内容根据单击的链接进行更改.在布局中，我有一个标题导航，然后是一行两列.标题导航的内容从不更改，左栏是可单击导航链接的静态列表.我想更改的唯一内容是基于单击的链接的右侧列的内容，我不想重新呈现整个应用程序，只想呈现该列的内容.

应用程序.js公司

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <通用组件/>
    </BrowserRouter>
  </React.StrictMode>
);

通用组件

    <>
      <Navbar>
        <div></div>
      </Navbar>
      <Container fluid>
        <Row>
          <Col xs={4} sm={4} md={4} lg={3} xl={2}>
            <Nav.Item href="/a">
              <Nav.Link href="a">Comp A</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="b">Comp B</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="c">Comp C</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="d">Comp D</Nav.Link>
            </Nav.Item>
          </Col>
          <Col xs={8} sm={8} md={8} lg={9} xl={10}>
            <Routes>
              <Route path="/" element={<Navigate to="a" replace />} />
              <Route path="/a" element={<CompA {...props} />} />
              <Route path="/b" element={<CompB {...props} />} />
              <Route path="/c" element={<Compc {...props} />} />
              <Route path="/d" element={<CompD {...props} />} />
            </Routes>
          </Col>
        </Row>
      </Container>
    </>

CompA、CompB等只是不同的形式，并不复杂.然而，任何点击侧导航链接都会呈现整个应用程序.