title: Changing route parameters when a different dropdown option is selected in React
body: <p>I have a dropdown in my application, and I want it so that when a user selects a different option from the dropdown, it should update the url.</p>
  
  <p>For example, if I have a <code>DropDown</code> component like such:</p>
  
  <pre><code>class DropDown extends React.Component {
    render() {
      return (
        &lt;select&gt;
          &lt;DropDownOption name="foo" /&gt;
          &lt;DropDownOption name="bar" /&gt;
        &lt;/select&gt;
      );
    }
  }
  </code></pre>
  
  <p>And a <code>DropDownOption</code> component like such:</p>
  
  <pre><code>import { Link } from 'react-router-dom';  
  
  class DropDownOption extends React.Component {
  render() {
      return (
        &lt;option&gt;
          &lt;Link to={`/value=${this.props.name}`}&gt;
          &lt;/Link&gt;
        &lt;/option&gt;
      );
    }
  }
  </code></pre>
  
  <p>If the user clicks on the dropdown then selects 'foo', the url would change to for example: "<code>localhost:3000/value=foo</code>",
  and when they select 'bar', it would change to "<code>localhost:3000/value=bar</code>"</p>
  
  <p>However, this doesn't work because <code>&lt;option&gt;</code> tag cannot have an <code>&lt;a&gt;</code> tag inside of it, but I was hoping to do it using <code>&lt;Link&gt;</code> from the <code>react-router-dom</code> module because I have been using it in other places (eg. for buttons) to change the route parameters and it has worked fine.</p>
  
  <p>Any suggestions how I can implement this?</p>