React useEffect导航返回主页不触发致空白页，如何解决？

现象 #

• 首次进入主页时，所有dispatch操作正常，产品列表渲染符合预期
• 从ProductScreen页面通过<Link to='..'>返回主页时，HomeScreen的useEffect未触发，Redux状态未更新，页面空白；手动刷新主页后恢复正常
• 从其他页面导航到主页或其他页面时，存在相同问题

路由配置 #

{/* Product Screen Design none Functionalities Complete */}
<Route
    path='/product/:id'
    element={<ProductScreen />}
/>
{/* HomeScreen Screen Design complete Functionalities complete */}
<Route
    path='/'
    element={<HomeScreen />}
    exact
/>

相关代码 #

HomeScreen组件 #

const HomeScreen = () => {
    const dispatch = useDispatch()

    const { keyword, pageNumber } = useParams()
    const keywords = keyword
    const pageNumbers = pageNumber || 1

    const { products, page, pages, isLoading, isError, message } = useSelector(
        (state) => state.products,
    )

    useEffect(() => {
        if (isError) {
            toast.error(message)
        }

        dispatch(getProduct(keywords, pageNumbers))
    }, [isError, message, keywords, pageNumbers, dispatch])
}

ProductScreen组件 #

const ProductScreen = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const { id } = useParams()
    const [qty, setQty] = useState(1)
    const [image, setImage] = useState(null)
    const [formData, setFormData] = useState({
        rating: '',
        comment: '',
    })

    const { rating, comment } = formData
    const { user } = useSelector((state) => state.auth)
    const { products, isLoading, isError, message } = useSelector(
        (state) => state.products,
    )

    useEffect(() => {
        if (isError) {
            toast.error(message)
        }
        dispatch(getProductById(id))
        return () => {
            dispatch(reset())
        }
    }, [dispatch, id, message, user, isError])
}

返回链接代码 #

return (
    <>
            <Link
                to='..'
                className='fa-2x my-3 float-left'
            >
                <IoIosArrowBack />
            </Link>
)

期望结果 #

使用useNavigate钩子或react-router-dom的Link导航时，主页能正常渲染

1. 修复useEffect依赖匹配问题
   HomeScreen中keywords和pageNumbers是useParams解构值的二次赋值，导航回主页时这些值变为undefined，但和初始渲染的undefined一致，导致useEffect未触发。直接使用useParams返回的原始参数作为依赖：

const params = useParams();
const keywords = params.keyword;
const pageNumbers = params.pageNumber || 1;

useEffect(() => {
    if (isError) {
        toast.error(message)
    }
    dispatch(getProduct(keywords, pageNumbers))
}, [isError, message, params.keyword, params.pageNumber, dispatch])

2. 替换相对路径为绝对路径
   使用<Link to="/">明确指定主页路径，避免相对路径可能引发的路由匹配歧义：

<Link
    to='/'
    className='fa-2x my-3 float-left'
>
    <IoIosArrowBack />
</Link>

3. 监听路由变化强制触发数据获取
   添加useLocation监听路径变化，确保每次导航回主页都触发数据请求：

const location = useLocation();

useEffect(() => {
    if (isError) {
        toast.error(message)
    }
    dispatch(getProduct(keywords, pageNumbers))
}, [isError, message, keywords, pageNumbers, dispatch, location.pathname])

4. 检查reset action的状态影响
   ProductScreen的清理函数调用dispatch(reset())可能将products状态置为undefined，需确保reset action仅清除当前页面相关状态，或在HomeScreen的请求中覆盖空白状态。

内容的提问来源于stack exchange，提问作者Prakash Sharma