title: React: how to navigation without refresh page using office UI fabric
body: <p>I'm using <a href="https://developer.microsoft.com/en-us/fabric#/components/nav" rel="noreferrer">Office UI Fabric</a> to create app with different views.</p>
  
  <p>navbar.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Nav } from 'office-ui-fabric-react/lib/Nav';
  
  export default class NavBar extends Component {
  
    render() {
      return (
        &lt;Nav
          groups={[
            {
              links: [
                { name: 'Home', key: 'Home', url: '/' },
                { name: 'Activity', key: 'Activity', url: '/activity' },
                { name: 'News', key: 'News', url: '/news' },
                { name: 'Documents', key: 'Documents', url: '/documents' }
              ]
            }
          ]}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>and in App.js, I just return  and . 
  The problem is, when I click on the item of NavBar, the page will refreshed and load the whole view in that route. How I can reload just the  component, not the whole page?</p>
  
  <hr>
  
  <p>Here's the routing part in the App.js render return:</p>
  
  <pre><code>&lt;div className="body"&gt;
      &lt;NavBar /&gt;
      &lt;Router&gt;
        &lt;div style={{ flex: 1}}&gt;
         {routes.map((route, index) =&gt; (
           &lt;Route
             key={index}
             path={route.path}
             exact={route.exact}
             component={route.main}
           /&gt;
         ))}
        &lt;/div&gt;
     &lt;/Router&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have the routes like:</p>
  
  <pre><code>const routes = [
    {
      path: "/",
      exact: true,
      main: () =&gt; &lt;Home /&gt;
    },
    {
      path: "/activity",
      exact: true,
      main: () =&gt; &lt;Activity /&gt;
    },
    {
      path: "/news",
      exact: true,
      main: () =&gt; &lt;News/&gt;
    },
    {
      path: "/documents",
      exact: true,
      main: () =&gt; &lt;Documents /&gt;
    }
  ];
  </code></pre>
  
  <p>And the page is working, but how I can use  to specify the Nav bar items if I click on one, then just render the target component?</p>