Реагируйте на оболочку, чтобы вернуть дочерний элемент <Route>

Question

Возможно ли в React условно визуализировать внутреннюю часть с использованием такого рода компонента?

import PropTypes from 'prop-types'
import { useApplication } from 'ice-components'

const canEdit = (currentUser) => {
    if (currentUser.settings.canEditSpecRec.value === 'False' || !currentUser.location.isSpecimenReceptionType) {
        return false
    }
    return true
}

const Permissions = ({ children }) => {
    const { currentUser } = useApplication()
    if (!canEdit(currentUser)) {
        return null
    }
    return children
}
Permissions.propTypes = {
    children: PropTypes.node,
}
export { Permissions as default, canEdit }

И маршрут сделан следующим образом:

<Switch>
   <Route exact path component={component_1} />
   <Route path='/anotherPath' component={component_2} />
<Switch>

Я пытался оберните компонент Permissions вокруг одного компонента Route, но он ломается. Любые идеи?

Answer 1

Хороший способ условного рендеринга маршрута - тот, который предоставлен в разделе Auth документации по реагирующему маршрутизатору: https://reacttraining.com/react-router/web/example/auth-workflow

В вашем приложении отличается то, что вы Вы не авторизуетесь, основываясь на аутентификации, но с некоторыми разрешениями пользователя вы можете сделать что-то вроде этого:

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        canEdit(currentUser) ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/",
            }}
          />
        )
      }
    />
  );
}

Оборачивание маршрута в компоненте PrivateRoute, который вернет ваш маршрут, если у пользователя есть разрешение, или что-то еще, если нет (возможно перенаправление).

export default function AuthExample() {
  return (
    <Router>
      <div>



        <Switch>
          <Route path="/public">
            <PublicPage />
          </Route>
          <Route path="/login">
            <LoginPage />
          </Route>
          <PrivateRoute path="/protected">
            <ProtectedPage />
          </PrivateRoute>
        </Switch>
      </div>
    </Router>
  );
}