CODEWITHSUNDEEP
reactjsreact-routerdropdownreact-bootstrap
Greg-A
Greg-A

Reputation: 862

How to make an href dropdown item that does not reload the page with React-boostrap

I use a Dropdown with react-bootstrap.

in the dropdown item I fill in an href that will allow me to change page.

   <Dropdown>
    <Dropdown.Toggle variant="success" id="dropdown-basic">
     Menu
   </Dropdown.Toggle>

   <Dropdown.Menu>
     <Dropdown.Item href="#/action-1">aries</Dropdown.Item>
     <Dropdown.Item href="#/action-2">taurus</Dropdown.Item>

  </Dropdown.Menu>
 </Dropdown>

When I click on a dropdown item it completely reloads the page things I do not want.

    <Dropdown.Item>
      <Link
        to={{
          pathname: `#/action-1`,
        }}
      >
        {' '}
        aries
      </Link>
      </Dropdown.Item>

the problem is that I get an error message that tells me:

 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Do you have a solution for this problem ?

Upvotes: 1

Views: 948

Answers (1)

Jai248
Jai248

Reputation: 1649

Try this

<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>

Upvotes: 1

Related Questions