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

Posted 2023-03-10

【中文标题】如何在 React Router 的多个私有页面上呈现这些组件？

【英文标题】：How can I render these components on multiple private pages in 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);

【问题讨论】：

“我想做的是渲染导航”是什么意思，你想显示导航栏吗？

是的，基本上，我想渲染一个 的实例，它与导航栏几乎相同。

【参考方案1】：

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

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