React router, How to render component within a layout (vs. stand alone)

Question

I have my meteor app working with React and React-Router. I am able to set up routes and render them correctly. My issue is I would like to render a component inside a layout (common grid, menu, header, etc). Right now, any path renders the components by taking over the entire page.

main.html

<head>
  <title>List App</title>
</head>

<body>
  <div id="target"></div>
</body>

main.coffee

browserHistory = createBrowserHistory()

export renderRoutes = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path='/' component={App} />
      <Route path="/mylists" component={MyLists} />
      <Route path="/list/:listId" component={List} />
      <Route path="/layout" component={Layout} />
      <Route exact path="/discover" component={Browse} />
      <Route component={NotFoundPage} />
    </Switch>
  </Router>
)

Meteor.startup () ->
  console.log "Hello from Client."
  render(renderRoutes(), document.getElementById('target'))

When navigating to a route (ie. path=’/’), the browser displays ONLY that single component, in this case, App. Makes perfect sense as I am rendering all routes to target.

I want my routes to render INSIDE another component. For example, I have a Layout component with nav, logo, etc. Once a user hits a route, I’d want just that component rendered inside the Layout (ie. MyLists, Browse, etc). Seems like it should be straightforward, but I can’t seem to get set it up right.

Appreciate any advice.

score 1 · Accepted Answer · answered Sep 23 '18 at 18:55

All you need to do to have a common Header, Footer and other Layout is to have a Layout Component and defined the Routes inside it like

browserHistory = createBrowserHistory()

export renderRoutes = () => (
  <Router history={browserHistory}>
     <Route component={LayoutComponent} />
  </Router>
)

const LayoutComponent = (props) => {
    <div>
        <Header />
        {/* other data */}
        <Switch>
          <Route exact path='/' component={App} />
          <Route path="/mylists" component={MyLists} />
          <Route path="/list/:listId" component={List} />
          <Route path="/layout" component={Layout} />
          <Route exact path="/discover" component={Browse} />
          <Route component={NotFoundPage} />
        </Switch>
        <Footer />
    </div>

}

Meteor.startup () ->
  console.log "Hello from Client."
  render(renderRoutes(), document.getElementById('target'))

React router, How to render component within a layout (vs. stand alone)

1 Answers1