How to Change pages via react Router with Bootstrap Dropdown?

Question

I am trying to change/load router with bootstrap dropdown menu, please help me to do this

<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

If I'm understanding your question correctly, you are asking how to affect a navigation action from the dropdown menu, specifically the Dropdown.Item components.

Render each dropdown item as a Link component and supply the appropriate link props.

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>