react-router-bootstrap: LinkContainer triggers "unknown prop" warning in React.js 15.2

LinkContainer setting active prop in child anchor tag causes React.js 15.2 to complain.

warning.js:44Warning: Unknown prop `active` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by AppView)
    in li (created by AppView)
    in ul (created by AppView)
    in nav (created by AppView)
    in div (created by AppView)
    in AppView (created by RouterContext)
    in RouterContext (created by Router)
    in Router

See react-unknown-prop mentioned in the warning for more details.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 23 (6 by maintainers)

Most upvoted comments

There is no LinkContainer in that element stack you’ve posted.

taion on Jul 2, 2016

I think you’re misunderstanding what that warning means, and what the point of <LinkContainer> is.

<LinkContainer> is exactly intended to inject down onClick, href, and active props. It’s the responsibility of the contained component (as is the case with React-Bootstrap components) to strip out the active prop and render the relevant active state.

taion on Jul 2, 2016

Also occurs with Navbar.Link (used in order to link to an external URL). I’ve worked around it instead by wiring up a NavItem to an onClick event that redirects. Are there any other suggestions?

     <Navbar.Collapse>
       <Nav>
         <LinkContainer to={{ pathname: '/listings'}}>
           <NavItem eventKey={1}>Sample</NavItem>
         </LinkContainer>
         <li>
          <Navbar.Link href="https://www.google.com" target="_blank">Leads to warnings</Navbar.Link>
         </li>
         <NavItem eventKey={6} onClick={this.handleExternalUrlRedirectClick}>Workaround</NavItem>
       </Nav>
       <Nav pullRight>
         <NavItem eventKey={8} onClick={this.handleClick}>Logout</NavItem>
       </Nav>
     </Navbar.Collapse>

tulbox on Mar 15, 2017