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. 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 per page, implementing this pattern is pretty straight forward. The goal of this post is to show how you can, by rendering multiple s, render separate components at separate parts of your page based on the path (like a sidebar). Route Route 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. 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 s we can map over it and specify which component should be rendered ( or ). To show how that’s done, let’s first build out the basic skeleton for our app. Route main sidebar 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 array, so wherever we want to render some s we can just map over it. First, let’s add some s to the sidebar (inside of our nav). routes Route Route 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) => (<Routekey={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 to s prop. This is the crux of the example and shows the importance of the array we created earlier. Now whenever the location matches the , 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 again but instead of passing , we’ll pass it . route.sidebar Route component routes path routes component route.sidebar route.main 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) => (<Routekey={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 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 s . Route Route path Originally published at tylermcginnis.com as part of their React Router course.
