Question

我只想在用户通过身份验证后才能加载组件。通常，我有这个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>将被忽略

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

Answer 1

最好写一个可重用的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
    }}
/>

Answer 2

使用三元运算符包装您的路线，并在路线末尾添加一个重定向组件。

Answer 3

您可以使用HOC来包装需要验证的路由组件，其他不需要验证的组件则可以正常呈现它们

HOC身份验证示例：

const loginGuard = Component =>
  connect(state => ({
    auth: getAuth(state),
  }))(({ auth, ...props }) => {
    if (auth) {
      return <Component auth={auth} {...props} />;
    }

    // push to sign in if try access to component requires authentication
    history.push('/sign-in');
    return null;
  });

用法：

<Route
    {...rest}
    component={loginGuard(AdminComponent)}
  />

Answer 4

只需删除新路线中的component属性，就像这样：

const DynamicComp = MeetingRoutes

 return <Route 
  createMeeting={createMeeting}
  path="/meetings"
  render={props =>
    createMeeting === true ? <DynamicComp {...props} createMeeting={createMeeting} /> : <Redirect to="/" />
  } />

React中的条件路由

4 个答案: