リアクションルータV4はユーザーの役割に基づいてリダイレクトします

Question

isEmployerとisCandidateの2種類のユーザーがあります。私がログインすると、私のアプリはユーザーのroleをチェックし、適切なランディングページにリダイレクトして適切なルートをロードします。このすべてが正しく動作しているようですが、ルートはloginまたはregistrationにリダイレクトされます（ユーザロールisCandidateの場合）。ユーザーisEmployerの場合、ページは変更されませんが、ナビゲーションバーのナビゲーションオプションは変更されます。

私はここで何が欠けているのか分かりません。どんな助け？

パス：App.jsx

const App = appProps => (
    <Router> 
    <ScrollToTop> 
     <div className="bgColor"> 
     <NavBar {...appProps} /> 
     <Grid className="main-page-container"> 
      <Switch> 
      {/* candidate routes */} 
      <IsCandidate exact path="/candidate" component={CandidateProfileContainer} {...appProps} /> 

      {/* employer routes */} 
      <IsEmployer exact path="/employer/dashboard" component={EmployerDashboardContainer} {...appProps} /> 


      {/* IsPublic routes */} 
      <IsPublic exact path="/register" component={Register} {...appProps} /> 
      <IsPublic exact path="/login" component={Login} {...appProps} /> {/* Page not found */} 
      <Route render={function() { 
       return <p>Page not found</p>; 
      }} 
      /> 
      </Switch> 
     </Grid> 
     </div> 
    </ScrollToTop> 
    </Router> 
); 

App.propTypes = { 
    loggingIn: PropTypes.bool, 
    isCandidate: PropTypes.bool, 
    isEmployer: PropTypes.bool 
}; 

export default withTracker(() => { 
    const loggingIn = Meteor.loggingIn(); 
    return { 
    loggingIn, 
    isCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isCandidate'), 
    isEmployer: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isEmployer') 
    }; 
})(App); 

パス：isEmployer.jsx

import React from 'react'; 
import PropTypes from 'prop-types'; // ES6 
import { Route, Redirect } from 'react-router-dom'; 

const IsEmployer = ({ loggingIn, isEmployer, component: Component, ...rest }) => (
    <Route 
    {...rest} 
    render={(props) => { 
     if (loggingIn) return <div />; 
     return isEmployer ? 
     (<Component loggingIn={loggingIn} isEmployer={isEmployer} {...rest} {...props} />) : 
     (<Redirect to="/login" />); 
    }} 
    /> 
); 

IsEmployer.propTypes = { 
    loggingIn: PropTypes.bool, 
    isEmployer: PropTypes.bool, 
    component: PropTypes.func 
}; 

export default IsEmployer; 

パス：isCandiate.jsx

import React from 'react'; 
import PropTypes from 'prop-types'; // ES6 
import { Route, Redirect } from 'react-router-dom'; 

const IsCandidate = ({ loggingIn, isCandidate, component: Component, ...rest }) => (
    <Route 
    {...rest} 
    render={(props) => { 
     if (loggingIn) return <div />; 
     return isCandidate ? 
     (<Component loggingIn={loggingIn} isCandidate={isCandidate} {...rest} {...props} />) : 
     (<Redirect to="/login" />); 
    }} 
    /> 
); 

IsCandidate.propTypes = { 
    loggingIn: PropTypes.bool, 
    isCandidate: PropTypes.bool, 
    component: PropTypes.func 
}; 

export default IsCandidate; 

Answer 1

私はアイデアは、あなたがコンポーネントを返す関数に渡すことができていると思いますユーザーの状態ごとに正しいです。コンポーネント= {（）=> {ユーザーが適切なコンポーネントを返すかどうかを判断するロジック}} これは意味がありますか？

私は申し訳ありません