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

Question

使用 React Router 4，构建我们的网络应用程序。

情况如下：我有五个页面："Home"、"Schedule"、"Profile"、"Groups" 和 "Events"。

主页任何人都可以访问，其他四个需要登录。

我想要做的是呈现一个将显示在这四个页面上但不显示在主页上的导航。

这是到目前为止我的路由器中的内容。

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

// 这将只是 (isLoggedIn ?) 在决赛中。 return（真|| isLoggedIn）？ ( renderMergedProps（组件，routeProps，休息） ) : ( ); }} /> );

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

您应该能够将您的 {Homepage} 路由包装在开关内，并确保该路由是准确的，然后让 PrivateRoutes 位于开关外但在 Div 内。在您的私人路线之前但在开关关闭之后，有一个呈现导航栏的“/”路线（不完全匹配）。

按照这个逻辑，主页将在“/”处单独呈现（它在一个开关内）。如果您点击私人路线，因为您在交换机之外，它们将以包含方式呈现，因此它将在 NavBar 上匹配（不是完全匹配），然后在您所在的私人路线上匹配。

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

How can I render these components on multiple private pages in React Router?

reactjs

react-router

react-router-v4