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

react
2

So this is really not a meteor question but a react-router question, and it depends on which version of RR you’re using. If it’s RR V4, you can do it like so:

// Just to make sure you're importing BrowserRouter
import { BrowserRouter, Route, Switch } from "react-router-dom";

...


  <BrowserRouter>
    <div>
      <Header />
      <Menu />
      // ... other constantly shown components
      // then, put your route specific components inside the switch:
      <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>
    </div>
  </BrowserRouter>

Based on how you have it set up though I think you might be using V3. If you are, I would recommend upgrading. If you really don’t want to, you can make it work like this

const App = props => (
  <div>
    <Header />
    <Menu />
    // ... other constantly shown components
    {props.children} // route-specific components will appear here
</div>
);

// and then modify your renderRoutes to be like:

export renderRoutes = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route path='/' component={App} /> // this uses the App component we made above. All below components will appear there as `props.children` when their route is selected
      <IndexRoute component={IndexRouteComponent} /> // The component to send to App's `props.children` when route is '/'
      <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>
)
1 Like