Question

I'm getting a warning message on the console when I declare a inside a <NavItem>

I'm not able to route properly if I use it as described on React-Bootstrap documentation <NavItem eventKey={1} href="#">Link</NavItem> since href won't read the route. Any suggestions?

Here's my declaration:

const MainMenu = () =>(
    <Router>
        <div>
            <Navbar inverse collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <Link to="/">Krona Farmaceutica</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem><Link to="/Med">Medicamentos</Link></NavItem> // here's where the warning happens.
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <Route exact path="/" component={Home}/>
            <Route path="/Med" component={Med}/>
        </div>
    </Router>
)

Answer 1

您可以使用React Router Bootstrap软件包或@eyerean使用此解决方案来自https://github.com/ReactTraining/react-router/issues/4463#issuecomment-342838735

import { Link } from 'react-router-dom';
import { NavBar, Nav, NavItem} from 'react-bootstrap';

const NavBar = ({location}) => (
    <NavBar>
        <Nav>
            <NavItem componentClass={Link} href="/economies" to="/economies" active={location.pathname === '/economies'}>Economies</NavItem>
            <NavItem componentClass={Link} href="/industries" to="/industries" active={location.pathname === '/industries'}>Industries</NavItem>
        </Nav>
    <NavBar>
// ...

与 “ react-router-dom”：“ ^ 4.2.2” “ react-bootstrap”：“ ^ 0.31.5”

validateDOMNesting（...）：<a> cannot appear as a descendant of </a> <a>

1 个答案: