Change recommended React Router usage in Dropdowns

[Venefilyn]

Right now, in Dropdown docs we recommend using

<DropdownItem key="link">
  <Link to={'/'}>Link</Link>
</DropdownItem>

Since this by default will create nested <a> we will get an error. On top of that there will also be applied global link styling.

One way we could fix this is by using hooks.

const history = useHistory();
//...

<DropdownItem key="link" onClick={() => history.push("/")}>
  Link
</DropdownItem>

And for class-based usage we can recommend usage from this StackOverflow answer. That way we can use it the same way with onClick as shown above.

[kmcfaul]

Adding the property component="div" will also prevent the nesting anchor issue. Our example will have to be updated to include that, at the very least.

[Venefilyn]

Then we still have the issue described on #3641, where the link will have link styling applied as well as only registering when you click the actual text instead of somewhere in the dropdown item

[Venefilyn]

Fixed in #3889