如何链接或路由反应语义 UI 下拉组件

Question

我是 React 的新手。我正在尝试添加指向 React 语义 UI 下拉菜单的链接。以下是我从 React 语义 UI 中获取的组件

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);
const options = [
  { key: "user", text: "Account", icon: "user", to: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", to: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", to: "/sign-out" }
];

const DropdownMenu = () => (
  <Dropdown
    trigger={trigger}
    options={options}
    pointing="top right"
    icon={null}
  />
);

export default DropdownMenu;

我尝试将“to”关键字添加到选项数组中，并将路由路径添加到位于不同组件中的路由器，但它不起作用。任何帮助将不胜感激，谢谢。

Answer 1

或者你可以使用Dropdown.Menu和Dropdown.Item。每个 Dropdown.Item 可以有 param as={Link} to='/somewhere'/。

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { Link } from "react-router-dom";

const trigger = (
    <span style={{ marginTop: "2px" }}>
        <i aria-hidden="true" class="user big icon" size="big" />
    </span>
);

const DropdownMenu = () => (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
        <Dropdown.Menu>
            <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
            <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
            <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
        </Dropdown.Menu>
    </Dropdown>
);

export default DropdownMenu;

我希望它会帮助你。