validateDOMNesting(...): <a> 不能作为 <a> 的后代出现答案

【问题标题】：validateDOMNesting(...): <a> cannot appear as a descendant of <a>validateDOMNesting(...): <a> 不能作为 <a> 的后代出现
【发布时间】：2017-11-03 18:16:31
【问题描述】：

当我在 <NavItem> 中声明 a 时，我在控制台上收到一条警告消息

如果我按照 React-Bootstrap 文档<NavItem eventKey={1} href="#">Link</NavItem> 中的描述使用它，我将无法正确路由，因为 href 不会读取路由。有什么建议吗？

这是我的声明：

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>
)

【问题讨论】：

标签： twitter-bootstrap reactjs

【解决方案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>
// ...

适用于 “反应路由器 dom”：“^4.2.2” “反应引导”：“^0.31.5”

【讨论】：