时间戳

首页 > 解决方案 > React 中的条件路由

reactjs - React 中的条件路由

问题描述

如果用户经过身份验证，我只想能够加载组件。通常我有这个PrivateRoute组件：

const PrivateRoute = ({ component: Component, hasAccess, addUser, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      hasAccess === true ? <Component {...props} addUser={addUser} /> : <Redirect to="/" />
    }
  />
);

我这样称呼：

   <PrivateRoute
      hasAccess={hasAccess}
      path="/settings"
      component={Setting}
    />

但在另一种情况下，我无法重用此代码。所以我决定像这样声明路线：

<Route
  createMeeting={createMeeting}
  path="/meetings"
  component={MeetingRoutes}
  render={props =>
    createMeeting === true ? <Component {...props} createMeeting={createMeeting} /> : <Redirect to="/" />
  } />

如果您问我，它的行为应该与 PrivateRoute 相同，但事实并非如此。相反，我收到了此错误消息：

警告：你不应该在同一条路线上使用<Route component>和；将被忽略<Route render><Route render>

有人可以向我解释为什么它会给我这个错误吗？我找不到我的问题的解决方案。

标签： reactjsreact-router-dom

解决方案

最好写一个可重用的PrivateRoute：

const PrivateRoute = ({ component: Component, hasAccess, componentProps = {}, redirectTo = "/", ...rest }) => (
    <Route
        {...rest}
        render={props =>
            hasAccess ? <Component {...props} {...componentProps} /> : <Redirect to={redirectTo} />
        }
    />
);

所以Settings你可以像这样使用这条路线：

<PrivateRoute
    hasAccess={hasAccess}
    path="/settings"
    component={Setting}
    componentProps={{
        addUser: addUser
    }}
/>

像MeetingRoutes这样：

<PrivateRoute
    hasAccess={hasAccessToMeetingRoutes}
    path="/meetings"
    component={MeetingRoutes}
    componentProps={{
        createMeeting: createMeeting
    }}
/>

推荐阅读