CODEWITHSUNDEEP
reactjsreact-router
ThrowsException
ThrowsException

Reputation: 2636

Hide parent component in react-router

In react router is there a way to have child routes but not display the parent component? I'm trying to display breadcrumbs in my application so I switched to having child routes but I don't want to display the parent component in the way of a 'master/detail' type layout. I just want the child component displayed as if it were navigated to by itself but it seems if you don't include {this.props.children} somewhere in the parent component then then child component never gets rendered.

One hack I've tried is seeing if this.props.children is populated and not displaying the rest of the page in render like 

if(this.props.children) {
   return (this.props.children) 
} else { 
  return /**rest of render method**/
}

but this feels like a bad solution.

Upvotes: 1

Views: 1288

Answers (1)

Nathan
Nathan

Reputation: 8026

I'm having trouble understanding exactly what you're trying to do, but it seems <IndexRoute> could help you, since that lets you distinguish what you do at /portal vs. /portal/feature

<Route path="/portal" component={ComponentContainingBreadcrumbs}>
  <IndexRoute component={ComponentWithRestofRenderMethodFromYourExample} />
  <Route path="child1" component={Child1} />
  <Route path="child2" component={Child2} />
</Route>

Upvotes: 1

Related Questions