title: Set active Bootstrap nav dropdown when any item in the list is active in React-Router v4
body: <p>I'm using React Router v4 and trying to write up a wrapper that allows the Bootstrap dropdown class to be active. The gist is that I need match multiple routes, and I'm unsure exactly how to do that in this wrapper. </p>
  
  <p>Here is what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { PropTypes } from 'react';
  import { Link } from 'react-router';
  
  const DropDownLinkWrapper = ({links, label}) =&gt; {
    return (
      &lt;Link to="/link1|/link2"&gt; // &lt;-- this is what I want to do
        {({isActive}) =&gt;
          &lt;li className={`dropdown ${isActive ? 'active' : ''}`}&gt;
            &lt;a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false"&gt;{label}&lt;span className="caret"/&gt;&lt;/a&gt;
            &lt;ul className="dropdown-menu"&gt;
              {// output menu links here}
            &lt;/ul&gt;
          &lt;/li&gt;
        }
      &lt;/Link&gt;
    );
  };
  
  DropDownLinkWrapper.propTypes = {
    links: PropTypes.array.isRequired,
    label: PropTypes.string.isRequired
  };
  
  export default DropDownLinkWrapper;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would imagine that the first <code>&lt;Link/&gt;</code>'s <code>to</code> prop would need to match on two URLs. But of course, this doesn't work. Does anyone have a solution for this? </p>