我在我的一個組件中收到此型別錯誤，我想根據條件在加載時重定向用戶，
例如 - 如果用戶未登錄，則將他重定向到登錄頁面
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'/>
有人可以解釋為什么它給我一個錯誤
uj5u.com熱心網友回復：
你不能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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338454.html