title: placing router links in a sliding sidebar
body: <p>I have created a single page app using react-router, but I am wanting to now place my router links in a sidebar which transitions in from the left.</p>
  
  <p>I have been trying for a few days now but no matter what I seem to do my route links keep just appearing either on their own and not in the sidebar component or they want to render in the sidebar component once they are clicked on.</p>
  
  <p>Sidebar component:</p>
  
  <pre><code>import React, {Component} from 'react';
  import './SideDrawer.css';
  import {BrowserRouter, Route, Link} from 'react-router-dom';
  
  const routes = [
    {
    path: '/',
    exact: true,
    sidebar: () =&gt; &lt;div&gt;&lt;/div&gt;,
    main: () =&gt; &lt;p&gt;Home&lt;/p&gt;
    },
    {
    path: '/dogs',
    sidebar: () =&gt; &lt;div&gt;Dogs&lt;/div&gt;,
    main: () =&gt; &lt;p&gt;Dogs&lt;/p&gt;
    }
  ];
  
  
  const sideDrawer = props =&gt; {
    let drawerClasses = 'side-drawer'
  
    if (props.show) {
      drawerClasses='side-drawer open'
    }
    return(
      &lt;div className='Main'&gt;
      &lt;nav className={drawerClasses}&gt;
      &lt;BrowserRouter&gt;
        &lt;div style={{display: 'flex'}}&gt;
          &lt;div className='navBar'&gt;
            &lt;ul style={{listStyleType: 'none'}}&gt;
              &lt;li&gt;&lt;Link to='/'&gt;Home&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to='/dogs'&gt;Dogs&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
  
          &lt;/div&gt;
  
            &lt;div style={{flex:1, padding:'0px'}}&gt;
              {routes.map((route) =&gt; (
                &lt;Route
                  key={route.path}
                  path={route.path}
                  exact={route.exact}
                  component={route.main}
                  /&gt;
              ))}
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
  
   &lt;/nav&gt;
  
  &lt;/div&gt;
  );
  };
  
  
  export default sideDrawer;
  </code></pre>
  
  <p>App Component:</p>
  
  <pre><code>class App extends Component {
    state ={
      sideDrawerOpen: false
    };
    drawerToggleClickHandler = () =&gt; {
      this.setState((prevState) =&gt; {
        return {sideDrawerOpen: !prevState.sideDrawerOpen};
      });
    };
  
    backdropClickHandler = () =&gt; {
      this.setState({sideDrawerOpen: false});
    };
  
    render() {
      let backDrop;
  
      if (this.state.sideDrawerOpen) {
        backDrop = &lt;Backdrop click={this.backdropClickHandler}/&gt;;
      }
      return (
        &lt;div style={{height:'100%'}} className="App"&gt;
          &lt;Toolbar drawerClickHandler ={this.drawerToggleClickHandler}/&gt;
          &lt;SideDrawer show={this.state.sideDrawerOpen}/&gt;
          {backDrop}
          &lt;main style={{marginTop:'64px'}}&gt;
          'place lists here'
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App
  </code></pre>
  
  <p>I was hoping for the sliding sidebar to render the router-links, and once clicked they will render the links contents in the space beside/behind the sliding sidebar. But instead it is wanting to render the links inside the sidebar also.</p>