title: Where should BrowserRouter go?
body: <p>I have a working React/Redux Router app, implemented with <code>react-router-dom 4.2.2</code> and <code>react-router-redux 5.0.0-alpha.9</code>.</p>
  
  <p>I'd like to add the basename <code>/calendar</code> to all paths though, via <a href="https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string" rel="nofollow noreferrer">BrowserRouter's basename API</a> that looks like this:</p>
  
  <pre><code>&lt;BrowserRouter basename="/calendar"/&gt;
  &lt;Link to="/today"/&gt; // renders &lt;a href="/calendar/today"&gt;
  </code></pre>
  
  <p>But this far I haven't had any use for <code>BrowserRouter</code>, so I don't knwo really where it should go. </p>
  
  <p>I have tried to encapsulate (+ put it next to as in the example above) the <code>NavLink</code>s  as well as the <code>Route</code>s with <code>BrowserRouter</code>, but that doesn't seem to do anything.</p>
  
  <p>As my app works fine without <code>BrowserRouter</code> - is it an optional part of <code>react-router</code> or is it already integrated somehow in <code>react-router-redux</code>?</p>
  
  <p><strong>Update</strong></p>
  
  <p>This is how I've tried to encapsulate <code>NavLink</code> and/or <code>Route</code> with <code>BrowserRouter</code>:</p>
  
  <pre><code>const ComponentA = () =&gt; (
    &lt;div&gt;
      &lt;BrowserRouter basename='/calendar'&gt;
        &lt;NavLink exact to="/a"&gt;Home&lt;/NavLink&gt;
        &lt;NavLink to="/about"&gt;About&lt;/NavLink&gt;
    &lt;/BrowserRouter&gt;
  &lt;/div&gt;
  )
  
  const ComponentB = () =&gt; (
    &lt;div&gt;
      &lt;BrowserRouter basename='/calendar'&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={HomePage} /&gt;
          &lt;Route path="/about" component={AboutPage} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    &lt;/div&gt;
  )
  </code></pre>