javascript 反作用域开发.js：86警告：验证DOM嵌套(...)：不能< a>作为的后代出现< a>

qzlgjiam 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(152)

我不明白为什么出现这个警告react-dom.development.js：86警告：验证DOM嵌套（...）：不能作为的后代出现。
这是我的代码。

import React from 'react'
import { NavLink } from 'react-router-dom'
import { Container, Nav, Navbar } from 'react-bootstrap';


const Navigation = () => {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="/"><NavLink to="/" className="nav-link3">Restaurant-App</NavLink></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features" ><NavLink to="/" className="nav-link3">Home</NavLink></Nav.Link>
            <Nav.Link href="#pricing" ><NavLink to="/list" className="nav-link3">List</NavLink></Nav.Link>
            <Nav.Link href="#features"><NavLink to="/create" className="nav-link3">Create</NavLink></Nav.Link>
            <Nav.Link href="#pricing"><NavLink to="/search" className="nav-link3">Search</NavLink></Nav.Link>
            <Nav.Link href="#pricing" ><NavLink to="/update" className="nav-link3">Update</NavLink></Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>

  )

}

export default Navigation

我使用了react-router-dom”：“第6.6.2节

JavaScript

来源：https://stackoverflow.com/questions/75206405/react-dom-development-js86-warning-validatedomnesting-a-cannot-appear

1条答案

按热度按时间

4uqofj5v1#

您正在渲染NavLink组件（* 锚点标记 ）在Nav.Link组件内（ 也是anchor标记 ）。您还为每个标记指定了两个不同的链接目标。您可以通过将NavLink传递给Nav.Link组件的as属性来指定Nav.Link组件真正*呈现NavLink组件。I '我假设您正试图导航到特定的页面和散列链接，因此这两个目标将被合并。
示例：

import React from 'react'
import { NavLink } from 'react-router-dom'
import { Container, Nav, Navbar } from 'react-bootstrap';

const Navigation = () => {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand as={NavLink} to="/" className="nav-link3">
          Restaurant-App
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={NavLink} to="/#features" className="nav-link3">
              Home
            </Nav.Link>
            <Nav.Link as={NavLink} to="/list#pricing" className="nav-link3">
              List
            </Nav.Link>
            <Nav.Link as={NavLink} to="/create#features" className="nav-link3">
              Create
            </Nav.Link>
            <Nav.Link as={NavLink} to="/search#pricing" className="nav-link3">
              Search
            </Nav.Link>
            <Nav.Link as={NavLink} to="/update#pricing" className="nav-link3">
              Update
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 反作用域开发.js：86警告：验证DOM嵌套(...)：不能< a>作为的后代出现< a>

1条答案

相关问题

热门标签

最新问答