title: React router v4 breadcrumbs
body: <p>I am trying to implement <a href="https://www.npmjs.com/package/react-router-dynamic-breadcrumbs" rel="nofollow noreferrer">React Router Breadcrumbs for v4</a></p>
  
  <p>Following are my routes:</p>
  
  <pre><code>    const routes = {
        '/': 'Home',
        '/page1': 'Page 1',
        '/page2': 'Page 2'
      };
  </code></pre>
  
  <p>I could put the breadcrumbs using this library in my application, however I am having following questions:</p>
  
  <p><strong>Que. #1:</strong> </p>
  
  <p>When I click on <code>Home</code> in my breadcrumbs, I can see the URL changes to <code>http://localhost:8080</code> However, browser still shows the same page I am on.</p>
  
  <p><strong>Que. #2:</strong> </p>
  
  <p>When I navigate to Page2 from Page1, <code>url</code> changes from <code>http://localhost:8080/page1</code> to <code>http://localhost:8080/page2</code>.</p>
  
  <p>So the breadcrumbs shown changes to <code>Home / Page 2</code> instead of changing like <code>Home / Page 1 / Page 2</code></p>
  
  <p>I know this may be because the <code>url</code> just has <code>/page2</code> after hostname. But, can I achieve the display like: <code>Home / Page 1 / Page 2</code>?</p>
  
  <p>Below is the code in my main <code>App.jsx</code>:</p>
  
  <pre><code>&lt;Router&gt;
    &lt;div&gt;
      &lt;Link to="/"&gt;&lt;div className="routerStyle"&gt;&lt;Glyphicon glyph="home" /&gt;&lt;/div&gt;&lt;/Link&gt;
      &lt;Route exact path="/" component={LandingPage}/&gt;
      &lt;Route path="/page1" component={Page1}/&gt;
      &lt;Route path="/page2" component={Page2}/&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>and if I use like belowto cater for breadcrumbs, then my page2 gets rendered below page1 stuff:</p>
  
  <pre><code>    &lt;Router&gt;
        &lt;div&gt;
          &lt;Link to="/"&gt;&lt;div className="routerStyle"&gt;&lt;Glyphicon glyph="home" /&gt;&lt;/div&gt;&lt;/Link&gt;
          &lt;Route exact path="/" component={LandingPage}/&gt;
          &lt;Route path="/page1" component={Page1}/&gt;
          &lt;Route path="/page1/page2" component={Page2}/&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
  </code></pre>
  
  <p><strong><em>Answer:</em></strong></p>
  
  <p><strong>Que. #1:</strong> No need to wrap <code>&lt;Breadcrumbs ..../&gt;</code> element inside <code>&lt;Router&gt;</code> element inside each Component of application. This may be because, inclusion of <code>&lt;Router&gt;</code> element inside each Component leads to "nesting" of <code>Router</code> elements (note we have <code>Router</code> tag in landing page as well); which does not work with <code>react router v4</code>. </p>
  
  <p><strong>Que. #2:</strong> Refer to answer formally marked here (answered by <em>palsrealm</em> below)</p>