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

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 and a main component.

The examples of react router I've found only have one child component, what is the best way to have multiple child components change without repeating the layout code in both?

Answer

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 = () => (
  
    

      
        padding: '10px',
        width: '40%',
        background: '#f0f0f0'

      }}>
        

          
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.
                      key={index}
            path={route.path}
            exact={route.exact}
            component={route.sidebar}

          />
        ))}
      

      

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

            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        ))}
      
    
  
)


export default SidebarExample

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