Rendering a Sidebar or Breadcrumbs with React Router v4
Tags: react, javascript, reactrouter
Published: 2018-12-11 19:59:46

---
title: 'Rendering a Sidebar or Breadcrumbs with React Router v4'
description: "When building an app with React Router, often you'll want to implement a sidebar or breadcrumb navbar. In this post you'll learn how that's done with React Router by breaking down the Sidebar example from the React Router documentation."
tags: "react, javascript, react-router"
cover_image: "https://tylermcginnis.com/static/11cbe4638434e8c7d274fa80ac5e1a10/f20d7/sidebar-react-router.webp"
canonical_url: "https://tylermcginnis.com/react-router-sidebar-breadcrumbs/"
published: "true"
---

When building an app with React Router, often you'll want to implement a sidebar or breadcrumb navbar. In this post you'll learn how that's done with React Router by breaking down the Sidebar example from the React Router documentation.

{% youtube iXh3VvyC3hM %}

A common UI pattern is to have a sidebar or breadcrumb navbar in your app. Because React Router allows you to render and match more than one `Route` per page, implementing this pattern is pretty straight forward. The goal of this post is to show how you can, by rendering multiple `Route`s, render separate components at separate parts of your page based on the path (like a sidebar).

The first thing we'll do, and really the secret to this post, is to create a routes array. Each item in the array is going to contain all the information about the specific route, and also which component should be rendered.

```js
const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
]
```

Now, because we've abstracted our routes to this array, whenever we want to render any `Route`s we can map over it and specify which component should be rendered (`main` or `sidebar`). To show how that's done, let's first build out the basic skeleton for our app.

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

const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
]

class App extends React.Component {
  render() {
    return (
      <Router>
        <div style={{ display: 'flex' }}>
          <div style={{
            padding: '10px',
            width: '40%',
            background: '#f0f0f0'
          }}>
            <ul style={{ listStyleType: 'none', padding: 0 }}>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/bubblegum">Bubblegum</Link></li>
              <li><Link to="/shoelaces">Shoelaces</Link></li>
            </ul>

          </div>
        </div>
      </Router>
    )
  }
}

export default App
```

Now remember the goal here is to render multiple components in different places of the app, based on the path. We already have our `routes` array, so wherever we want to render some `Route`s we can just map over it. First, let's add some `Route`s to the sidebar (inside of our nav).

```js
render() {
  return (
    <Router>
      <div style={{ display: 'flex' }}>
        <div style={{
          padding: '10px',
          width: '40%',
          background: '#f0f0f0'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/bubblegum">Bubblegum</Link></li>
            <li><Link to="/shoelaces">Shoelaces</Link></li>
          </ul>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.sidebar}
            />
          ))}
        </div>
      </div>
    </Router>
  )
}
```

The biggest thing to notice is that we've passed in `route.sidebar` to `Route`s `component` prop. This is the crux of the example and shows the importance of the `routes` array we created earlier. Now whenever the location matches the `path`, the sidebar component will be rendered. However, we don't just want to stop there. We also want to render a component in the main body of our app when the location matches the path. To do that, we'll map over `routes` again but instead of passing `component` `route.sidebar`, we'll pass it `route.main`.

```js
render() {
  return (
    <Router>
      <div style={{ display: 'flex' }}>
        <div style={{
          padding: '10px',
          width: '40%',
          background: '#f0f0f0'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/bubblegum">Bubblegum</Link></li>
            <li><Link to="/shoelaces">Shoelaces</Link></li>
          </ul>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.sidebar}
            />
          ))}
        </div>

        <div style={{ flex: 1, padding: '10px' }}>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.main}
            />
          ))}
        </div>
      </div>
    </Router>
  )
}
```

🕺. Now, because React Router allows us to render and match more than one `Route` on a page, and because we abstracted our routes to an array, we can render different components at different sections of our page whenever the location matches the `Route`s `path`.

***

This was originally published at [TylerMcGinnis.com](https://tylermcginnis.com/react-router-sidebar-breadcrumbs/) and is part of their [React Router](https://tylermcginnis.com/courses/react-router/) course.