它的 return 类型 'void | Element' 不是有效的 JSX 元素。类型 'void' 不可分配给类型 'Element | null'

Question

我在我想要在加载时重定向用户的组件之一中收到此类型错误根据条件
例如-如果用户未登录，则将他重定向到登录页面

import { useHistory } from 'react-router';
const someCompo = () => {
     const history = useHistory();
     if(!user) return history.push('/login');
     return(<div>...component </div>)
}
export default someCompo;

但是当我在反应测试库的渲染中测试这个组件时。我收到这种类型的错误

在 .test 文件中

import { render, screen } from '@testing-library/react';
import someCompo from '../someCompo ';
it('Check Redirect', () => {
   render(<someCompo />)
}

但是当我使用重定向时它没有显示错误

  if (!user) return <Redirect to='/login'/>

谁能解释一下为什么会出现错误

Answer 1

你不能 return void 作为一个元素。如果你想做这样的事情，最好使用 useEffect

import { useHistory } from 'react-router';
const someCompo = ({ user }) => {
   const history = useHistory();
   useEffect(() => {
     if(!user) {
       history.push('/login');
     }
   }, [user]);
   if(!user) return null;
   return <div>...component </div>;
}
export default someCompo;

return history.push('/login') 将 return void，因为 history.push('/login') 将 return void。 void 不是有效的反应元素。

没有 useEffect 钩子的丑陋方式是：

import { useHistory } from 'react-router';
const someCompo = ({ user }) => {
   const history = useHistory();
   if(!user) {
     history.push('/login');
     return null;
   }
   return <div>...component </div>;
}
export default someCompo;

它的 return 类型 'void | Element' 不是有效的 JSX 元素。类型 'void' 不可分配给类型 'Element | null'

Its return type 'void | Element' is not a valid JSX element. Type 'void' is not assignable to type 'Element | null'

reactjs

react-router-dom

react-testing-library