如何链接或路由反应语义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”关键字添加到options数组中，并将路径路径添加到路由器中，该路径位于不同的组件中，但它不起作用。任何帮助将不胜感激，谢谢。

Answer 1

你可以尝试这样的事情。将键更改为选项数组中的值。然后使用onChange方法来处理选择。如果不可用，您可能希望将历史道具从父组件传递到要调用操作的组件。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Dropdown, Form } from "semantic-ui-react";

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", value: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", value: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", value: "/sign-out" }
];

class App extends Component {
  move = (e, { value }) => {
    this.props.history.push('value')
  }

  render() {
    return (
      <div>
        <Dropdown
          options={options}
          trigger={trigger}
          icon={null}
          onChange={this.move}
        />
      </div>
    );
  }
}