title: React JS component with nested navigation
body: <p>I've been having some trouble with the following. I've tried for a few hours to find some help through searching, but have come up empty handed. It could be that I don't know the name of what I'm trying to do, but I figured I'd ask here. </p>
  
  <p>I've been learning React for about a month. Currently I'm trying to create a component which has it's own navigation bar and displays it's content based on which link in the component's navigation bar is clicked.</p>
  
  <p>I have a Navigation bar for the entire website, using React Router, and I've tried nesting the component's route in the Route for the page I want it displayed, but when I click on a link within said component, instead of simply having the content displayed within that component, I'm navigated to a new page (in this case: localhost3000/#/project1). That new page displays the entire component, with the correct content. However, I want to avoid navigating to a new page. </p>
  
  <p>Here's a pic of what I want to do. </p>
  
  <p><a href="https://i.stack.imgur.com/EkzGE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EkzGE.png" alt="enter image description here"></a></p>
  
  <p>Here's some of the code I've got so far. (I've omitted the imports and anything else unnecessary. </p>
  
  <p><strong>My index.js</strong></p>
  
  <pre><code>ReactDOM.render(
    &lt;Router history={hashHistory}&gt;
      &lt;Route path="/" component={App}&gt;
        &lt;IndexRoute component={OtherPage}&gt;&lt;/IndexRoute&gt;
        &lt;Route path="Project_Page" component={ProjectPage} /&gt;
        &lt;Route component={ProjectsComponent}&gt;
          &lt;Route path="project1" component={Project1} /&gt;
          &lt;Route path="project2" coponent={Project2} /&gt;
          &lt;Route path="project3" coponent={Project3} /&gt;
        &lt;/Route&gt;
        &lt;Route path="Another_Page" component={AnotherPage}&gt;&lt;/Route&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
    ,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>My ProjectPage.js</strong></p>
  
  <pre><code>export default class ProjectPage extends Component{
    render(){
      return(
        &lt;div&gt;
           &lt;ProjectsComponent /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>My ProjectsComponent.js</strong></p>
  
  <pre><code>export default class ProjectsComponent extends Component{
    render(){
      return(
        &lt;div&gt;
          &lt;ProjectsNav /&gt;      // this is the navbar for my projects component
          &lt;div&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>My ProjectsNav.js</strong></p>
  
  <pre><code>export default class ProjectsNav extends Component{
    render(){
      return(
        &lt;div&gt;
          &lt;Link to="Project1" className="btn btn-primary"&gt;Project 1&lt;/Link&gt;
          &lt;Link to="Project2" className="btn btn-primary"&gt;Project 2&lt;/Link&gt;
          &lt;Link to="Project3" className="btn btn-primary"&gt;Project 3&lt;/Link&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Finally
  <strong>My Project1.js</strong> project2 &amp;&amp; project3 are pretty much the same thing.</p>
  
  <pre><code>export default class Project1 extends Component{
    render(){
      return(
        &lt;div className="project"&gt;
          Hello from Project 1
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I'm sorry if this is something that's already been covered. If it has, please feel free to point me in the right direction. That's really all I need. </p>
  
  <p>Thank you so much for your help. </p>