Reactjs React中的条件路由

我只想在用户通过身份验证后才能加载组件。通常我有这个

privaterout

组件：

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

const PrivateRoute=（{component:component，hasAccess，addUser，…rest}）=>(
hasAccess==true？：
}
/>
);

我这样称呼它：

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

但在另一种情况下，我不能重用此代码。所以我决定这样宣布路线：

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

const DynamicComp = MeetingRoutes

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

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

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

createMeeting==真？：
} />

如果你问我的话，它应该和私密路线一样，但事实并非如此。相反，我收到了以下错误消息：

警告：您不应在中使用

和

同一路线<代码>将被忽略

---

有人能给我解释一下为什么它会给我这个错误吗？我找不到解决问题的方法。

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

您可以使用包装路由组件需要验证其他组件不需要验证您可以正常渲染它们

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;
  });

const loginGuard=Component=>
连接（状态=>({
授权：getAuth（状态），
}))（{auth，…props}）=>{
if（auth）{
返回；
}
//如果尝试访问组件需要身份验证，则推送登录
history.push（“/登录”）；
返回null；
});

用法：

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

---

只需删除新管线中的component属性，如下所示：

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

const DynamicComp = MeetingRoutes

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

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

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

const DynamicComp=会议路线
返回
createMeeting==真？：
} />
最好编写一个可重用的
PrivateRoute
：

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


使用
会议路线
如下：

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

const DynamicComp = MeetingRoutes

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

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

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



第一种方法的问题是什么？也许这个链接很有用：。为什么要同时使用这两个组件和渲染？问题是，此路由重定向到另一个路由文件。在此文件中，只能访问某些路由，其余路由应基于
createMeeting
布尔值进行访问。我想把这个道具传递给那个文件，并在那里使用三元结构。但是它怎么知道现在应该呈现哪个组件呢？这个组件可以是动态的，你可以在这个JSX之外声明它。dynamicComp=会议路线这正是我想要的