React项目出现validateDOMNesting警告：<a>不能嵌套<a>求解答

你看到的警告validateDOMNesting(...): <a> cannot appear as a descendant of <a>是因为HTML规范明确禁止标签嵌套标签，你的代码恰好触发了这个非法结构：

• React Bootstrap的Navbar.Brand和Nav.Link组件默认会渲染为原生<a>标签
• 你在这些组件内部又嵌套了react-router-dom的NavLink组件（同样会渲染为<a>标签）
  两者叠加形成了嵌套的DOM结构，触发了React的DOM嵌套校验警告。

方法1：使用React Bootstrap组件的as属性（推荐） #

React Bootstrap导航组件支持通过as属性指定自定义渲染组件，直接将Navbar.Brand和Nav.Link指定为NavLink，避免嵌套：

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渲染为NavLink */}
        <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渲染为NavLink */}
            <Nav.Link as={NavLink} to="/" className="nav-link3">Home</Nav.Link>
            <Nav.Link as={NavLink} to="/list" className="nav-link3">List</Nav.Link>
            <Nav.Link as={NavLink} to="/create" className="nav-link3">Create</Nav.Link>
            <Nav.Link as={NavLink} to="/search" className="nav-link3">Search</Nav.Link>
            <Nav.Link as={NavLink} to="/update" className="nav-link3">Update</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

export default Navigation

方法2：移除嵌套结构，直接使用NavLink #

如果不需要React Bootstrap的导航组件样式，可直接替换为NavLink并手动添加Bootstrap类名：

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>
        <NavLink to="/" className="nav-link3 navbar-brand">Restaurant-App</NavLink>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <NavLink to="/" className="nav-link3 nav-link">Home</NavLink>
            <NavLink to="/list" className="nav-link3 nav-link">List</NavLink>
            <NavLink to="/create" className="nav-link3 nav-link">Create</NavLink>
            <NavLink to="/search" className="nav-link3 nav-link">Search</NavLink>
            <NavLink to="/update" className="nav-link3 nav-link">Update</NavLink>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

export default Navigation

内容的提问来源于stack exchange，提问作者user21063833