title: URL changes with React Router but component not rendering?
body: <p>I'm setting up a React app to utilize React Router. The URL changes when I click the Volunteers header on the left, but the component does not render. How should I set this up?</p>
  
  <p>I've tried to put the Routes in the SidePanel component, but I don't want the components to be rendered by React Router to be children of SidePanel, but siblings.</p>
  
  <p>My App Component:</p>
  
  <pre><code>// system imports
  import React from "react";
  import { BrowserRouter, Route} from "react-router-dom";
  
  // custom components
  import SidePanel from "./SidePanel.js";
  import VolunteerCombo from "./VolunteerCombo.js";
  import RegistrantsCombo from "./RegistrantsCombo.js";
  import Assignments from "./Assignments.js";
  import ActionLog from "./ActionLog.js";
  
  // css files
  import "../css/App.css";
  import "../css/ActivePanel.css";
  import "../css/MenuPanel.css";
  
  export class App extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        &lt;div className="main_container"&gt;
          &lt;SidePanel/&gt;
          &lt;BrowserRouter&gt;
            &lt;Route path="/volunteers" component={VolunteerCombo}&gt;&lt;/Route&gt;
            &lt;Route path="/registrants" component={RegistrantsCombo}&gt;&lt;/Route&gt;
            &lt;Route path="/assignments" component={Assignments}&gt;&lt;/Route&gt;
            &lt;Route path="/action_log" component={ActionLog}&gt;&lt;/Route&gt;
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And my SidePanel Component:</p>
  
  <pre><code>// system imports
  import React from "react";
  import { BrowserRouter, Route, Link } from "react-router-dom";
  
  // custom components
  
  
  // css files
  import "../css/SidePanel.css";
  
  class SidePanel extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        title: ""
      };
    }
  
    render() {
      return (
        &lt;div className="side_panel"&gt;
  
        &lt;BrowserRouter&gt;
  
          &lt;h3 style={{paddingTop: "3%"}}&gt;Chase Grainger&lt;/h3&gt;
          &lt;p className="ui button"&gt;Log Out&lt;/p&gt;
          &lt;div className="ui divider"&gt;&lt;/div&gt;
  
          &lt;Link to="/volunteers"&gt;
            &lt;h4 className="side_button"&gt;Volunteers&lt;/h4&gt;
          &lt;/Link&gt;
  
  
          &lt;h4 className="side_button"&gt;Registrants&lt;/h4&gt;
          &lt;h4 className="side_button"&gt;Assignments Mode&lt;/h4&gt;
          &lt;div className="ui divider"&gt;&lt;/div&gt;
  
          &lt;h4 className="side_button"&gt;Action Log&lt;/h4&gt;
  
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SidePanel;
  </code></pre>
  
  <p>I expected my VolunteerCombo component to show up when I clicked Volunteers on the left side, but the component did not render although the URL changed.</p>