我是 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”关键字添加到选项数组,并将路由路径添加到位于不同组件中的路由器,但它不起作用。任何帮助将不胜感激,谢谢。
最佳答案
或者您可以使用 Dropdown.Menu 和 Dropdown.Item。每个 Dropdown.Item 都可以有参数 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;
希望对您有所帮助。
关于javascript - 如何链接或路由 React 语义 UI 下拉组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55142019/