CODEWITHSUNDEEP
react-routerreactjsnested-routes
StevenAntonio
StevenAntonio

Reputation: 35

React JS component with nested navigation

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.

enter image description here

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.

Upvotes: 0

Views: 2395

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104539

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.

Upvotes: 1

Related Questions