Search code examples
dropdownsemantic-ui-react

semantic-ui-react dropdown link to a url

I have a Semantic UI React Dropdown component with options like

const options = [
  { key: 'user', text: 'Account', icon: 'user' },
  { key: 'settings', text: 'Settings', icon: 'settings' },
  { key: 'sign-out', text: 'Sign Out', icon: 'sign out' },
]

I want to link each of the above items to a url such as '/account', '/settings' and '/logout'

I'm not sure how to trigger such action. I do not see any href or in the props. I'm guessing I will have to write a onClick or onChange function?

Solution

  • simple task, not use onChange for change route : 

    import { Link } from 'react-router-dom';

const options = [
  { key: 'user', text: 'Account', icon: 'user', as: Link, to: '/my-account' },
  { key: 'settings', text: 'Settings', icon: 'settings' },
  { key: 'sign-out', text: 'Sign Out', icon: 'sign out' },
]