Change a tag to Link in react-bootstrap dropdown

2
votes

-- SOLVED --

react-bootstrap Dropdown Item renders as an 'a' tag, but this is causing my entire page to reload when I click on the item. Is there any way I can switch this out for a Link tag from react-router-dom?

This is what I'm currently doing, 

<Dropdown>
    <Dropdown.Toggle ...someAttrs...>
        <FontAwesome name='bars' size='2x' />=
    </Dropdown.Toggle>
    <Dropdown.Menu alignRight ..someAttrs...>
        <Dropdown.Item eventKey={1} className={'headerMenuLinks'}>
            <Link to={'/user/home'}>
                <h3>Home></h3>
            </Link>
        </Dropdown.Item>
    <Dropdown.Menu>
</Dropdown>

edited to show more of dropdown scheme. Also to clarify another part of the problem is a console error message I get when doing a <Link> inside of a <Dropdown.Item>

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

react-bootstrap: 1.0.0-beta.12
react-router-dom: 5.0.1
react: 16.9.0

Fix

<Dropdown.Item as={Link} eventKey={"2"} to={browseUrl} className={'Header-headerMenuLinks'}>
   <h3>Message</h3>
</Dropdown.Item>

Adding in the as={Link}, then switching href attribute to to fixes this issue.

1
reactjsdropdownreact-bootstrap
need more your code.. – kyun

1 Answers

0
votes
<Dropdown.Item as={Link} eventKey={"2"} to={browseUrl} className={'Header-headerMenuLinks'}>
   <h3>Message</h3>
</Dropdown.Item>

Fix: Adding in the as={Link}, then switching href attribute to to fixes this issue.