我正在尝试将其他组件链接为我的下拉列表中的选项 反应路由器-dom 问题

Question

>检查这张图片> 大家好，我正在尝试使用选项栏和选项馅饼作为我的标题列表项中的下拉选项，就像我如何使用其他链接来表示主页和关于我们一样

大家好，我正在尝试使用选项栏和选项派作为标题列表项中的下拉选项，就像我如何使用其他链接来表示主页和关于我们一样

import React, {Component} from 'react'
import { Link } from 'react-router-dom'
import { Dropdown, Menu, Icon} from `semantic-ui-react`;

const optionsBar = [
{as: Link, content: 'Rank ', to: '/barT', key: 'Rank'},
{as: Link, content: 'Category', to: '/barK', key: 'Category'},
]
const optionsPie = [
{as: Link, content: 'Rank ', to: '/pieT', key: 'Rank'},
{as: Link, content: 'Category', to: '/pieK', key: 'Category'},
]

class Header extends Component{
render(){
return (
<header>
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="/">Relation document </a>
</div>
<ul className="nav navbar-nav "> 
<li><Link to='/'>Home</Link></li>
<li><Link to='/page1'>ABout Us</Link></li>
<li><Link to='/page2'>Info</Link></li>
<li class="nav-item dropdown">
<a class="nav dropdown">
<Dropdown  header=`Select Rank or Category` options={optionsBar} defaultValue={optionsBar[0].value}  text='Bar' />  
</a>
</li>
<li class="nav-item dropdown">
<a class="nav dropdown">
<Dropdown  header='Select Rank or Category' options={optionsPie} defaultValue={optionsPie[0].value}  text='Pie' />  
</a>
</li>
</ul>
</div>
</nav>
</header>
)
}
}
export default Header

Answer 1

error: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

您收到此错误是因为您有两个相互嵌套的<a>标签，例如

<a><a>...</a></a>

我相信它正在这里发生：

<a class="nav dropdown">
<Dropdown options={optionsBar} .../>  
</a>

Dropdown项呈现为Link组件(请参阅optionsBar(，并且由于Link最终成为<a>标记，因此将嵌套<a>标记。