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

【问题标题】：How can I render these components on multiple private pages in React Router?如何在 React Router 的多个私有页面上呈现这些组件？
【发布时间】：2018-08-02 00:35:47
【问题描述】：

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

情况如下：我有五个页面：“主页”、“日程安排”、“个人资料”、“组”和“活动”。

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

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

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

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 ?) 在决赛中。返回（真|| 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);

【问题讨论】：

“我想做的是渲染导航”是什么意思，你想显示导航栏吗？
是的，基本上，我想渲染一个的实例，它与导航栏几乎相同。

标签： reactjs react-router react-router-v4

【解决方案1】：

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

按照这种逻辑，主页将在“/”处单独呈现（它位于开关内）。如果您点击私有路由，因为您在交换机之外，它们将包含在内渲染，因此它将在 NavBar 上匹配（不完全匹配），然后在您所在的私有路由上匹配。

【讨论】：