如何解决警告:validateDOMNesting...:<a>不能显示为<a>的后代在gatsby js项目中
因此,我将gatsby JS与react-bootstrap结合使用,我不清楚如何在使用似乎使用react-router的react-bootstrap的同时使用Gatsby的本地路由...我将Gatsby的<Link></Link>
嵌套在内部react-bootstrap的<Nav.Link href="#stuff"><Nav.Link>
可以正常工作,但是它似乎在某种程度上弄乱了DOM,因为我打开了控制台并且遇到了这个错误Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
,这是我的代码:
import React from "react";
import { Navbar,Nav,NavDropdown } from 'react-bootstrap';
import '../pages/styles.scss';
import { Link } from 'gatsby';
const CamcoNavbar = () => {
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link><Link to="/about/">About</Link></Nav.Link>
<Nav.Link><Link to="/companies/">Companies</Link></Nav.Link>
<Nav.Link><Link to="/sustainability/">Sustainability</Link></Nav.Link>
<Nav.Link><Link to="/riseabove/">Rise Above</Link></Nav.Link>
<Nav.Link><Link to="/team/">Our Team</Link></Nav.Link>
<Nav.Link><Link to="/contact/">Contact</Link></Nav.Link>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default CamcoNavbar
我应该如何同时使用gatsby和react-bootstrap进行路由?
解决方法
尝试将Nav.Link更改为Nav.Item(或从react-bootstrap导入NavItem),这将为您提供导航项的样式,但这不是链接的类型,因此不会与您混淆gatsby链接。当前,您正在将一个路由器链接放置在另一个路由器链接中,因此,当您单击gatsby应用程序时,它不知道要做什么,因为即使您未在Nav中定义href,它也会告诉它去两个不同的地方。链接组件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。