如何在React Router的多个私有页面上呈现这些组件？

Question

Working with React Router 4, building out our web app.

Here's the situation: I have five pages: "Home", "Schedule", "Profile", "Groups", and "Events".

Homepage can be accessed by anyone, the other four require login.

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.

Here's what I've got in my router so far.

const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return React.createElement(component, finalProps);
};

const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={routeProps => {
        return renderMergedProps(component, routeProps, rest);
      }}
    />
  );
};

const PrivateRoute = ({ component, isLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={routeProps => {
      //I'm currently forcing open the login with "true" just for testing

// This will just be (isLoggedIn ?) in the final. return (true || isLoggedIn) ? ( renderMergedProps(component, routeProps, rest) ) : ( ); }} /> );

const RouterComponent = props => (
  <BrowserRouter>
    <div>
      <Route exact path="/" component={HomePage} />
      <Switch>
        <PrivateRoute
          isLoggedIn={props.isLoggedIn}
          path="/my-profile"
          component={MyProfile}
          title="My Profile"
        />
        <PrivateRoute
          isLoggedIn={props.isLoggedIn}
          path="/my-schedule"
          component={MySchedule}
          title="My Schedule"
        />
        <PrivateRoute
          isLoggedIn={props.isLoggedIn}
          path="/my-groups"
          component={MyGroups}
          title="My Groups"
        />
        <PrivateRoute
          isLoggedIn={props.isLoggedIn}
          path="/my-events"
          component={MyEvents}
          title="My Events"
        />
      </Switch>
    </div>
  </BrowserRouter>
);

const mapStateToProps = state => ({ 
  isLoggedIn: state.auth.status === "authorized"
});

export default connect(mapStateToProps)(RouterComponent);

Answer 1

You should be able to instead wrap your {Homepage} route inside the switch, and make sure that route is exact, and then have the PrivateRoutes just outside the switch but inside the Div. Before your private routes but after the switch closes, have a route of "/" (not exact matching) that renders the Navbar.

By that logic, homepage will render exclusively on its own (it's inside a switch) at "/". If you hit the private routes, because you're outside a switch, they will render inclusively so it'll match on NavBar (not exact matching) and then match on the private route you're in.