它的返回类型 'void | Element' 不是有效的 JSX 元素。类型 'void' 不可分配给类型 'Element |空值'答案

【问题标题】：Its return type 'void | Element' is not a valid JSX element. Type 'void' is not assignable to type 'Element | null'它的返回类型 'void | Element' 不是有效的 JSX 元素。类型 'void' 不可分配给类型 'Element |空值'
【发布时间】：2021-10-27 12:20:02
【问题描述】：

我在我想在加载时重定向用户的组件之一中收到此类型错误视情况而定
ex- 如果用户未登录，则将他重定向到登录页面

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

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

在 .test 文件中

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

但是当我使用重定向时它不会显示错误

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

有人可以解释为什么它给我一个错误

【问题讨论】：

一个 React 组件必须总是返回一个 JSX 元素

标签： reactjs react-router-dom react-testing-library

【解决方案1】：

您不能将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') 将返回 void，因为 history.push('/login') 将返回 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;

【讨论】：