[React Router v4] Render Multiple Components for the Same Route

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

 

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

const Links = () =>
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>

const Header = ({match}) => (
  <div className="header">
    <Route path="/:page"
      render={({match}) => (
        <h1>{match.params.page} header</h1>)} />
  </div>
)

const Content = ({match}) => (
  <div className="content">
      <Route path="/:page"
        render={({match}) => (
          <p>{match.params.page} content</p>)} />
  </div>
)

const App = (props) => (
  <Router basename={props.path}>
    <div>
      <Links />
      <Header />
      <Content />
    </div>
  </Router>
)

export default App