Question

使用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？）。 return（true || isLoggedIn）？（ renderMergedProps（component，routeProps，rest））:( ）; }} /＆GT; ）;

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内部。在你的私人路线之前，但在开关关闭之后，有一条＆＃34; /＆＃34; （非精确匹配）呈现Navbar。

按照这种逻辑，主页将在＆＃34; /＆＃34;处独自呈现（它在交换机内）。如果你点击私人路线，因为你在一个开关之外，他们将包含所有内容，以便它在NavBar上匹配（不完全匹配），然后匹配你所在的私人路线。 / p>

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

1 个答案: