Using React-Router with a layout page or multiple components per page

Question

I am adding react router to an existing project.

At present a model is passed in to a root component which contains a navigation component for the sub navigation an

Answer 1

If I understood you correctly, to achieve that you would define multiple components in your Route. You can use it like:

// think of it outside the context of the router, if you had pluggable
// portions of your `render`, you might do it like this
, sidebar: }}/>

// So with the router it looks like this:
const routes = (
  
    
    
      
    
  
)

class App extends React.Component {
  render () {
    const { main, sidebar } = this.props;
    return (
      

        

          {main}
        
        

          {sidebar}
        
      
    )
  }
}

class Users extends React.Component {
  render () {
    return (
      

        {/* if at "/users/123" `children` will be  */}
        {/* UsersSidebar will also get  as this.props.children,
            so its a little weird, but you can decide which one wants
            to continue with the nesting */}
        {this.props.children}
      
    )
  }
}

Also check out the sidebar example app, should help you more.

Edit: As per @Luiz's comment:

In the latest version of router (v3) the components are in the root of the props object

So:

const { main, sidebar } = this.props.children;

becomes:

const { main, sidebar } = this.props;

---

EDIT: In the react-router v4 this can be accomplished like (as per the example provided in the new docs):

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.
const routes = [
  { path: '/',
    exact: true,
    sidebar: () => 
home!
,
    main: () => 
Home
  },
  { path: '/bubblegum',
    sidebar: () => 
bubblegum!
,
    main: () => 
Bubblegum
  },
  { path: '/shoelaces',
    sidebar: () => 
shoelaces!
,
    main: () => 
Shoelaces
  }
]

const SidebarExample = () => (
  
    

      

        

          
Home
          
Bubblegum
          
Shoelaces
        

        {routes.map((route, index) => (
          // You can render a  in as many places
          // as you want in your app. It will render along
          // with any other s that also match the URL.
          // So, a sidebar or breadcrumbs or anything else
          // that requires you to render multiple things
          // in multiple places at the same URL is nothing
          // more than multiple s.
          
        ))}
      

      

        {routes.map((route, index) => (
          // Render more s with the same paths as
          // above, but different components this time.
          
        ))}
      
    
  
)

export default SidebarExample

Make sure you check out the new React Router v4 docs here: https://reacttraining.com/react-router/