Javascript 使用链接渲染父组件时，子组件的useEffect不起作用>

所以我有这个父组件，它有一个子组件.我已经在主应用程序中为该组件定义了一条路由.现在我想从另一个页面访问这个父级，所以我使用了Link组件.问题是，每当用户想要访问页面(父组件)时，子组件中的useEffect无论如何都不会运行，因此会抛出一个错误.以下是相关代码.

应用程序组件:

import { BrowserRouter, Routes, Route} from "react-router-dom";
import Signup from "./components/signup";
import Messenger from "./components/messenger";
import Login from "./components/login";

function App() {

  return (
    <>
      <Routes>
        <Route path="/" element={<Login/>}/>
        <Route path='/signup' element={<Signup />}/>
        <Route path='/messenger' element={<Messenger/>}/>
        
      </Routes>
    </>
        
  );
}

export default App;

我要从中调用父级的组件

import { useEffect, useState, useRef } from 'react';
import {Link } from 'react-router-dom';
import SendIcon from '@mui/icons-material/Send';
import CircleIcon from '@mui/icons-material/Circle';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

const Header = ({pfp}) => {


    return ( 
        <div className='header'>

            <div className='headerleft'>
                <img src={logo} className='logo' alt="" />
            </div>
            <div className='headerright'>
                {ismsg && <span className={textval < 10 ? "countertexts" : "countertextsdouble"}  >8</span>}



                <Link to="/messenger"><SendIcon className='texts' fontSize='large' /></Link>



        
            </div>
        </div>

    );
}
 
export default Header;

父辈

return (
        <>
            
                            conversations.map((c) => (
                                <div key={c._id} onClick={() => { convohandler(c) }}>
                                    <Conversation conver={c} latestchat={latestchat} />
                                </div>
                            ))
                           
                        
        
       </>
       );
}

export default Messenger;

这子元素

import { useSelector } from "react-redux";
import { useEffect, useState} from "react";

const Conversation = ({conver,latestchat}) => {

    console.log(conver)    // this prop sent from 父辈 is getting printed just fine.

    
    let [fre, setFre] = useState("");
    let [isnow, setIsnow] = useState(false);

  
    useEffect(() => {

        console.log("not working anymore");  // this text is never printed

        // api call to set 'fre' state value

    },[]);

 
    return ( 

        <div className={ fre.blocked.includes("user") ?  "blocked"  : "unblocked" }>
    );
   
}
 
export default Conversation;

错误是由于初始状态值为空而产生的.但这不是解决之道. 我想使用API调用来设置状态值，这显然是不可能的，因为useEffect不运行.有谁能帮我拿一下这个吗？我认为问题出在链接组件的使用上.但我不确定.

谢谢你