title: How can I render these components on multiple private pages in React Router?
body: <p>Working with React Router 4, building out our web app. </p>
  
  <p>Here's the situation: I have five pages: "Home", "Schedule", "Profile", "Groups", and "Events".  </p>
  
  <p>Homepage can be accessed by anyone, the other four require login. </p>
  
  <p>What I'd like to do is render a navigation that will show up on those four pages, but NOT show up on the Home page.  </p>
  
  <p>Here's what I've got in my router so far.  </p>
  
  <pre><code>const renderMergedProps = (component, ...rest) =&gt; {
    const finalProps = Object.assign({}, ...rest);
    return React.createElement(component, finalProps);
  };
  
  const PropsRoute = ({ component, ...rest }) =&gt; {
    return (
      &lt;Route
        {...rest}
        render={routeProps =&gt; {
          return renderMergedProps(component, routeProps, rest);
        }}
      /&gt;
    );
  };
  
  const PrivateRoute = ({ component, isLoggedIn, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={routeProps =&gt; {
        //I'm currently forcing open the login with "true" just for testing
  </code></pre>
  
  <p>// This will just be (isLoggedIn ?) in the final. 
            return (true || isLoggedIn) ? (
              renderMergedProps(component, routeProps, rest)
            ) : (
              
            );
          }}
        />
      );</p>
  
  <pre><code>const RouterComponent = props =&gt; (
    &lt;BrowserRouter&gt;
      &lt;div&gt;
        &lt;Route exact path="/" component={HomePage} /&gt;
        &lt;Switch&gt;
          &lt;PrivateRoute
            isLoggedIn={props.isLoggedIn}
            path="/my-profile"
            component={MyProfile}
            title="My Profile"
          /&gt;
          &lt;PrivateRoute
            isLoggedIn={props.isLoggedIn}
            path="/my-schedule"
            component={MySchedule}
            title="My Schedule"
          /&gt;
          &lt;PrivateRoute
            isLoggedIn={props.isLoggedIn}
            path="/my-groups"
            component={MyGroups}
            title="My Groups"
          /&gt;
          &lt;PrivateRoute
            isLoggedIn={props.isLoggedIn}
            path="/my-events"
            component={MyEvents}
            title="My Events"
          /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  );
  
  const mapStateToProps = state =&gt; ({ 
    isLoggedIn: state.auth.status === "authorized"
  });
  
  export default connect(mapStateToProps)(RouterComponent);
  </code></pre>