为了确保单击单页应用程序 (SPA) 中的链接时只有右列中的内容会发生变化，而无需重新呈现整个应用程序，您需要正确配置组件Nav.Link和路由。您当前的问题似乎源于您设置属性的方式href。以下是解决此问题的步骤：

1. 使用NavLinkfromreact-router-dom而不是 plainNav.Link：此组件专门设计用于react-router处理导航而不导致整个页面重新加载。
2. 确保路由路径正确：确保组件中的路径与中的属性Route相匹配。to``NavLink

以下是更新后的代码：

App.js

这一点依然如故。

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

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <CommonComponent/>
    </BrowserRouter>
  </React.StrictMode>
);

CommonComponent.js

更新组件如下：

import { BrowserRouter, Routes, Route, Navigate, NavLink } from 'react-router-dom';
import { Navbar, Container, Row, Col, Nav } from 'react-bootstrap';
import CompA from './CompA';
import CompB from './CompB';
import CompC from './CompC';
import CompD from './CompD';

const CommonComponent = (props) => (
  <>
    <Navbar>
      <div></div>
    </Navbar>
    <Container fluid>
      <Row>
        <Col xs={4} sm={4} md={4} lg={3} xl={2}>
          <Nav className="flex-column">
            <Nav.Item>
              <NavLink to="/a" className="nav-link">Comp A</NavLink>
            </Nav.Item>
            <Nav.Item>
              <NavLink to="/b" className="nav-link">Comp B</NavLink>
            </Nav.Item>
            <Nav.Item>
              <NavLink to="/c" className="nav-link">Comp C</NavLink>
            </Nav.Item>
            <Nav.Item>
              <NavLink to="/d" className="nav-link">Comp D</NavLink>
            </Nav.Item>
          </Nav>
        </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>
  </>
);

export default CommonComponent;

解释：

1. NavLink：使用NavLink组件 fromreact-router-dom代替普通的Nav.Link。这确保单击链接时使用路由器的机制来更改 URL，而不会导致整个页面重新加载。
2. 路线配置Routes：确保和组件中的路径Route正确设置以匹配中使用的路径NavLink。
3. 活动链接的类名：NavLink可以自动将类应用于活动链接。如有必要，您可以使用 CSS 来设置其样式。

活动链接的 CSS（可选）

要对活动链接应用不同的样式，您可以添加一些 CSS：

.nav-link.active {
  font-weight: bold;
  color: #000;
}

此 CSS 使活动链接变为粗体并改变其颜色。您可以根据应用程序的需要对其进行自定义。

按照以下步骤，单击导航链接只会更新右侧列的内容，应用程序的其余部分将保持不变。