如何通过带有 Bootstrap Dropdown 的 React Router 更改页面？

我正在尝试使用引导下拉菜单更改/加载路由器，请帮助我执行此操作

<Router>
  <nav>
    <Link to="/"> Home </Link>
    <Link to="login"> Login </Link>
    <Link to="products"> Products </Link>
  </nav>
  <Dropdown className="dropdown-groove">
    <Dropdown.Toggle variant="link" id="dropdown-basic">
      {selectedItem}
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item
        href="#/action-1"
        onClick={() => setSelectedItem("Login")}
      >
        Login
      </Dropdown.Item>
      <Dropdown.Item
        href="#/action-1"
        onClick={() => setSelectedItem("Products")}
      >
        Products
      </Dropdown.Item> 
    </Dropdown.Menu>
  </Dropdown>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="login" element={<Login />} />
    <Route path="products" element={<Products />}/>      
  </Routes>
</Router>

https://codesandbox.io/s/router-change-on-bs-dropdown-tb4qsj

如果我正确理解您的问题，您是在问如何影响下拉菜单中的导航操作，特别是Dropdown.Item成分。

渲染每个下拉项as a Link组件并提供适当的链接道具。

Example:

<Dropdown className="dropdown-groove">
  <Dropdown.Toggle variant="link" id="dropdown-basic">
    {selectedItem}
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item
      as={Link}   // <-- as a Link
      to="/login" // <-- to target
      onClick={() => setSelectedItem("Login")}
    >
      Login
    </Dropdown.Item>
    <Dropdown.Item
      as={Link}      // <-- as a Link
      to="/products" // <-- to target
      onClick={() => setSelectedItem("Products")}
    >
      Products
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>