[React Router v4] Render Nested Routes

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application.

 

Parent route:

<NavLink to="/menu">Menu</NavLink>

<Route path="/menu" component={Menu}></Route>

 

Child route:

import React from 'react';
import {Link, Route} from 'react-router-dom';

const Menu = () => (
    <div>
        <h1>Menu</h1>
        <Link to="/menu/food" >Food</Link>
        <Link to="/menu/drinks">Drinks</Link>
        <Link to="/menu/slides">Slides</Link>

        <Route path="/menu/:section" render={({match}) => {
            return <h3>Section: {match.params.section}</h3>
        }}>
        </Route>
    </div>
);

export default Menu;