如何通过带有 Bootstrap 下拉菜单的 React Router 更改页面？

Question

我正在尝试 change/load 带有 bootstrap 下拉菜单的路由器，请帮助我完成此操作

<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

Answer 1

如果我没有正确理解你的问题，你是在询问如何影响下拉菜单中的导航操作，特别是 Dropdown.Item 组件。

将每个下拉项 呈现为 一个 Link 组件并提供适当的 link 道具。

示例：

<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>

如何通过带有 Bootstrap 下拉菜单的 React Router 更改页面？

How to Change pages via react Router with Bootstrap Dropdown?

reactjs

react-bootstrap

react-router

dropdown