Javascript 使用React-Redux对提供程序进行有效的DOM嵌套

Javascript 使用React-Redux对提供程序进行有效的DOM嵌套,javascript,reactjs,dom,react-router,react-redux,Javascript,Reactjs,Dom,React Router,React Redux,这是一个微不足道的问题,但我没有找到确切的答案。我的导航栏有以下链接,我使用React Router添加了这些链接: <Nav> <NavItem><IndexLink to="/" activeClassName="active">Home</IndexLink></NavItem> <NavItem><Link to="/courses" activeClassName="active">

这是一个微不足道的问题,但我没有找到确切的答案。我的导航栏有以下链接,我使用React Router添加了这些链接:

 <Nav>
     <NavItem><IndexLink to="/" activeClassName="active">Home</IndexLink></NavItem>
     <NavItem><Link to="/courses" activeClassName="active">Courses</Link></NavItem>
     <NavItem><Link to="/manageCourses" activeClassName="active">Manage Courses</Link></NavItem>
     <NavItem><Link to="/about" activeClassName="active">About</Link></NavItem>
 </Nav>

家
课程
管理课程
关于
然而,我不断收到这样的警告:

validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See HeaderMenu > NavItem > SafeAnchor > a > ... > IndexLink > Link > a.
validateDOMNesting(…):不能显示为的后代。请参见标题菜单>导航项>安全锚定>a>…>索引链接>链接>a。
我不太清楚我在哪里做了无效嵌套,因为我假设react router的
链接可以嵌套在navItem中


非常感谢您的帮助

基本上,它看起来既像
又像
呈现
标记

你需要换一个。由于我假设
来自
react router
,猜测
可能来自
react bootstrap
,我想您可能需要放弃
,自己实现这一部分。看起来现在这两个人的配合不是很好

你也可以走另一条路,抛弃
。除了一些特殊情况外,您不需要特别使用
本身。它确实为您提供了
activeClassName
位,但也可以单独实现


看起来另一个选项是使用
react router bootstrap
中的
LinkContainer
,它似乎尝试将两者连接起来。

基本上,它看起来像是
都呈现了
标记

你需要换一个。由于我假设
来自
react router
,猜测
可能来自
react bootstrap
,我想您可能需要放弃
,自己实现这一部分。看起来现在这两个人的配合不是很好

你也可以走另一条路,抛弃
。除了一些特殊情况外,您不需要特别使用
本身。它确实为您提供了
activeClassName
位,但也可以单独实现


看起来另一个选项是使用
react router bootstrap
中的
LinkContainer
,它似乎试图将两者连接起来。

您不应该在NavItem中设置锚

这是因为在渲染NavItem时,锚已经存在

试试这个 `


您不应该在NavItem内锚定

这是因为在渲染NavItem时,锚已经存在

试试这个 `


我意识到这些课程进展不顺利,但我不知道该怎么办。谢谢你的回答。@samanimeI意识到课程进行得不顺利,但无法找出原因。谢谢你的回答。@samanime
<Nav> 
     <LinkContainer to="/" >
        <NavItem>Home</NavItem>
    </LinkContainer>
</Nav>