How to link or route the react semantic UI dropdown component

Question

I am a newbie to React. I am trying to add links to the React semantic UI dropdown menu. Following is the component that I fetched from React semantic 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;

I tried adding "to" keyword to the options array and have added the Route paths to the Router which lies in a different component but it's not working. Any help would be appreciated, Thank you.

Answer 1

Or you can use Dropdown.Menu and Dropdown.Item. Each Dropdown.Item can have 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;

I hope it will help you.

Answer 2

You can try something like this. change the key to to value in you options array. then use onChange method to handle the selection. You may want to pass the history prop from parent component down to the component you want to invoke the action if its not available.

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>
    );
  }
}