Блог

Я создал <Authorise /> компонент, который отображает либо «да», либо «нет» на основе логического значения «разрешено».

 export const Authorise = ({
  allow = false,
  yes = () => null,
  no = () => null
}) => (allow ? yes() : no());
 

<Authorise /> компонент работает должным образом, однако, когда я пытаюсь отобразить a <Route /> , отображается только первый маршрут, а остальные <Route /> компоненты игнорируются.

Почему это происходит? Если я отображаю маршруты за пределами <Authorise /> компонента, он работает нормально. Только при рендеринге компонентов через <Authorise /> компонент это не работает, и я не могу понять, почему.

Посмотрите мой пример, чтобы увидеть проблему: CodeSandbox

Это из-за
https://reactrouter.com/web/api/Switch/children-node

Все дочерние элементы a <Switch> должны быть <Route> <Redirect> элементами or. Будет отображен только первый дочерний элемент, соответствующий текущему местоположению.

Если вы используете библиотеку, но не играете по ее правилам, то ожидалось, что произойдет нечто подобное.

Проблема не в вашей функции авторизации, а в компоненте маршрута, который будет отображаться только при совпадении пути. Второй выдает его с помощью переключателя, который сделает так, чтобы отображался только первый согласованный маршрут

При добавлении переключателя путь «/» всегда будет выбран, так как он является первым. Если вы попытаетесь удалить свой переключатель (или переместить маршрут с «/» в конце) и перейти к «/ next» на вашем локальном разработчике, тогда будет отображен маршрут / next