React Router v6中AddFarm组件useEffect未触发问题求助

核心原因：useEffect语法错误 #

你的AddFarm.js里对useEffect的使用方式完全错误——你把它当成变量赋值了，正确的用法是调用useEffect函数，而不是给它赋值。这直接导致React无法识别这个副作用钩子，自然不会触发。

修复步骤 #

1. 修正AddFarm.js中的useEffect写法 #

把错误的赋值写法改成标准的函数调用：

const fetchData = async()=>{
    console.log("fetchdata")
    try{
        const res = await axios.get("link")
        console.log(res)
    }catch(error){
        console.log(error)
    }
}

// 去掉等号，直接调用useEffect
useEffect(() =>{
    console.log("useEffect")
    fetchData()
}, [])

2. 可选优化：补全路由路径前缀 #

虽然这不是useEffect不触发的直接原因，但路由路径"anadir-granja"最好加上前缀斜杠写成"/anadir-granja"，避免后续嵌套路由场景下出现路径匹配异常：

return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Home/>}/>
        <Route exact path="/anadir-granja" element={<AddFarm/>}/>
      </Routes>
    </div>
);

验证方式 #

修改后重启项目，访问/anadir-granja路径，打开浏览器控制台，若能看到useEffect和fetchdata的日志输出，就证明useEffect已经正常触发。

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