产生错误的原因是您正在“/”处呈现菜单本身。当你到达另一条路时，例如。'/component-one'你再次渲染它。一个简单的解决方法是像这样放置菜单：

function App() {
  return (
    <BrowserRouter>
    <CustomMenu /> // By placing above the routes it always renders.
      <Routes>
        <Route element={<ComponentOne />} path="/component-one" />
        <Route element={<ComponentTwo />} path="/component-two" />
      </Routes>
    </BrowserRouter>
  )
}

这使得菜单始终呈现。然后停止它重新渲染再次删除它的组件，例如：

const ComponentTwo = () => {
  return (
    <>
      <div>Component Two</div>
    </>
  )
}

此外，良好的做法是将组件放置在路由器上的'/'处作为着陆位置，否则除非已经在其中一条路由上，否则不会呈现任何内容。