React JS component with nested navigation

Question

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.

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.

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.

Here's a pic of what I want to do.

Here's some of the code I've got so far. (I've omitted the imports and anything else unnecessary.

My index.js

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={OtherPage}></IndexRoute>
      <Route path="Project_Page" component={ProjectPage} />
      <Route component={ProjectsComponent}>
        <Route path="project1" component={Project1} />
        <Route path="project2" coponent={Project2} />
        <Route path="project3" coponent={Project3} />
      </Route>
      <Route path="Another_Page" component={AnotherPage}></Route>
    </Route>
  </Router>
  ,
  document.getElementById('root')
);

My ProjectPage.js

export default class ProjectPage extends Component{
  render(){
    return(
      <div>
         <ProjectsComponent />
      </div>
    );
  }
}

My ProjectsComponent.js

export default class ProjectsComponent extends Component{
  render(){
    return(
      <div>
        <ProjectsNav />      // this is the navbar for my projects component
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

My ProjectsNav.js

export default class ProjectsNav extends Component{
  render(){
    return(
      <div>
        <Link to="Project1" className="btn btn-primary">Project 1</Link>
        <Link to="Project2" className="btn btn-primary">Project 2</Link>
        <Link to="Project3" className="btn btn-primary">Project 3</Link>
      </div>
    );
  }
}

Finally My Project1.js project2 && project3 are pretty much the same thing.

export default class Project1 extends Component{
  render(){
    return(
      <div className="project">
        Hello from Project 1
      </div>
    );
  }
}

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.

Thank you so much for your help.

Let me get this right... You want the app to show the linked components instead of navigating to another page correct? If so you're requesting what React was made for. In other words, a single-page application (SPA). I'll provide an answer if this is the issue. — KA01, Jan 26 '17 at 05:27
You'll need to utilize component state in the parent component that will hold the selected Project. You'll pass this state to all Project components and the one component that matches this state will render while the others will not. I don't have time at the moment but I'll post an answer when I have the time. — KA01, Jan 26 '17 at 05:55
A couple of things that I notice with your code: 1) React Router does not support relative paths in locations, so `` should be ``. 2) The paths in your ``s are lowercase while the pathnames in your ``s are capitalized. I do not recall whether or not there is case sensitive matching when it comes to routes. — Paul S, Jan 26 '17 at 06:02
Hey folks. Thanks for taking the time to help out. I'll try see if I can figure out how to do it with props. Paul A, I changed the name of paths and components in the example in order to make it a bit more generic. In doing so, I must've made an error or two in punctuation. — StevenAntonio, Jan 26 '17 at 06:22

score 1 · Answer 1 · answered Jan 26 '17 at 06:40

ProjectsComponent component is not required, Try these components:

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={OtherPage}></IndexRoute>
      <Route path="Project_Page" component={ProjectPage}>
      //<Route component={ProjectsComponent}>
        <IndexRoute path="Project_Page/Project1" component={Project1} />
        <Route path="Project_Page/Project2" coponent={Project2} />
        <Route path="Project_Page/Project3" coponent={Project3} />
      </Route>
      <Route path="Another_Page" component={AnotherPage}></Route>
    </Route>
  </Router>
  ,
  document.getElementById('root')
);


export default class ProjectPage extends Component{
  render(){
    return(
      <div>
         <ProjectsNav />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}


export default class ProjectsNav extends Component{
  render(){
    return(
      <div>
        <Link to="Project_Page/Project1" className="btn btn-primary">Project 1</Link>
        <Link to="Project_Page/Project2" className="btn btn-primary">Project 2</Link>
        <Link to="Project_Page/Project3" className="btn btn-primary">Project 3</Link>
      </div>
    );
  }
}

Let me know if u face any issue or want any help.

Awesome! It looks fairly clear. I'll try this out when I get home from work later. Than you so much. I'll let you know how it goes. — StevenAntonio, Jan 26 '17 at 07:15

React JS component with nested navigation

1 Answers1