#reactjs #react-router-dom #react-testing-library
Вопрос:
Я получаю ошибку такого типа в одном из своих компонентов, в котором я хочу перенаправлять пользователей при загрузке на основе условий
, например, если пользователь не входит в систему, перенаправьте его на страницу входа
import { useHistory } from 'react-router'; const someCompo = () =gt; { const history = useHistory(); if(!user) return history.push('/login'); return(lt;divgt;...component lt;/divgt;) } export default someCompo;
но когда я тестирую этот компонент в рендеринге библиотеки тестирования реакций. я получаю ошибку этого типа
В файле .test
import { render, screen } from '@testing-library/react'; import someCompo from '../someCompo '; it('Check Redirect', () =gt; { render(lt;someCompo /gt;) }
Но когда я использую перенаправление, оно не показывает ошибку
if (!user) return lt;Redirect to='/login'/gt;
Может кто-нибудь, пожалуйста, объяснить, почему это приводит меня к ошибке
Комментарии:
1. Компонент React всегда должен возвращать элемент JSX
Ответ №1:
вы не можете вернуться void
как элемент. и если вы хотите сделать что-то подобное, было бы лучше использовать useEffect
import { useHistory } from 'react-router'; const someCompo = ({ user }) =gt; { const history = useHistory(); useEffect(() =gt; { if(!user) { history.push('/login'); } }, [user]); if(!user) return null; return lt;divgt;...component lt;/divgt;; } export default someCompo;
return history.push('/login')
вернется void
, как history.push('/login')
вернется void
. и void
не является допустимым элементом react.
уродливый способ без использования эффекта крючка был бы:
import { useHistory } from 'react-router'; const someCompo = ({ user }) =gt; { const history = useHistory(); if(!user) { history.push('/login'); return null; } return lt;divgt;...component lt;/divgt;; } export default someCompo;