React-Router-Dom技术求助：如何将组件设为导航栏下拉选项

我帮你梳理了代码里的几个小问题，调整后就能让Bar和Pie的下拉菜单正常工作，和Home、About Us的跳转逻辑保持一致啦：

主要修改点： #

• React中要使用className替代原生HTML的class属性，避免语法错误
• 适配Bootstrap navbar的下拉样式，给触发按钮加上必要的样式属性
• 优化Semantic UI Dropdown的配置，确保下拉选项里的Link能正确跳转

完整修正代码： #

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">
              <Link className="navbar-brand" to="/">Relation document</Link>
            </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>
              {/* Bar下拉菜单 */}
              <li className="nav-item dropdown">
                <Dropdown
                  as="a"
                  className="nav-link dropdown-toggle"
                  text="Bar"
                  options={optionsBar}
                  pointing="top left"
                  trigger={<a className="dropdown-toggle" data-toggle="dropdown"></a>}
                />
              </li>
              {/* Pie下拉菜单 */}
              <li className="nav-item dropdown">
                <Dropdown
                  as="a"
                  className="nav-link dropdown-toggle"
                  text="Pie"
                  options={optionsPie}
                  pointing="top left"
                  trigger={<a className="dropdown-toggle" data-toggle="dropdown"></a>}
                />
              </li>
            </ul>
          </div>
        </nav>
      </header>
    );
  }
}

export default Header;

关键说明： #

1. 把原生的<a>标签替换成Semantic UI的Dropdown组件，通过as="a"让它渲染成a标签，同时继承navbar的样式
2. 给Dropdown添加nav-link dropdown-toggle类，配合Bootstrap的下拉样式，确保下拉菜单的展开/收起行为正常
3. 保留options数组里的as: Link配置，让每个下拉选项都是React Router的Link组件，点击后能正确跳转对应路由

这样调整后，Bar和Pie的下拉菜单就会和你想要的效果一致啦~

内容的提问来源于stack exchange，提问作者Abdullah Yusuf Azzam