如何在React中实现基于角色的访问路由控制

需求说明：为不同角色分配页面访问权限，普通用户仅能访问部分页面，经理可访问更多页面，管理员拥有全部页面的访问权限。以下是各角色登录后的路由实现示例：

管理员角色路由 #

当用户角色为admin时，可访问所有页面：

const role = 'admin'
{role === 'admin' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
      <Route path='/products-edit' exact={true} component={ProductsEdit} />
      <Route path='/all-products' exact={true} component={AllProducts} />
    </>
)}

经理角色路由 #

当用户角色为manager时，可访问首页、产品列表及产品编辑页面：

const role = 'manager'
{role === 'manager' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
      <Route path='/products-edit' exact={true} component={ProductsEdit} />
    </>
)}

普通用户角色路由 #

当用户角色为user时，仅可访问首页和产品列表页面：

const role = 'user'
{role === 'user' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
    </>
)}

内容的提问来源于stack exchange，提问作者Asif Kaif