Блог

Я получаю ошибку такого типа в одном из своих компонентов, в котором я хочу перенаправлять пользователей при загрузке на основе условий
, например, если пользователь не входит в систему, перенаправьте его на страницу входа

 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;   

Может кто-нибудь, пожалуйста, объяснить, почему это приводит меня к ошибке

вы не можете вернуться 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;