Javascript 使用React-Redux对提供程序进行有效的DOM嵌套
这是一个微不足道的问题,但我没有找到确切的答案。我的导航栏有以下链接,我使用React Router添加了这些链接: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">
<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>