Reactjs 防止在管线更改时重新渲染React组件

我使用的是react路由器dom

假设我有两个页面，比如主页和个人资料页面。两个页面都有一个名为Header的组件

在Header组件中，我使用useEffect React钩子在后端服务器上调用一个获取请求并获取登录的用户数据。API返回用户名、化身图像等（这不是问题）

事情是这样的。当我从“主页”跳转到“配置文件页面”时，标题组件将重新呈现并再次向服务器发送请求。每当我从主页跳转到配置文件页面或从配置文件页面跳转到主页时，都会发生这种情况。并且头上显示的数据将一直加载，直到获取的请求成功为止

我想要像Youtube这样的东西

标题组件

从'react'导入{useState，useffect}
从“./imgs/Logo.png”导入徽标
从“react router dom”导入{Link}
从“react icons/fa”导入{FaArrowRight，FaServicestack，FaFirstOrder}；
从“react icons/all”导入{BsPersonCheck，AiOutlineContacts}；
常数ShowOrHideNav=（）=>{
var nav=document.getElementById（'NavBarSpingbuck'）
nav.classList.toggle（'hidden'）
}
常量头=（）=>{
const[loggedIn，setLoggedIn]=useState（false）
const[user_data，setUserData]=useState（未定义）
常量注销=（）=>{
localStorage.removietem（'sb\u auth\u token'）
UpdateHeader（）
}
const UpdateHeader=（）=>{
const auth\u token=localStorage.getItem（'sb\u auth\u token'）
if（身份验证令牌）{
console.log（'发送请求'）
取回(
'https://dummy_API_URL.dummy_domain.com/authentication/user/',
{
标题：{
授权：“令牌”+授权令牌，
},
}
)
.then（response=>response.json（））
。然后（响应数据=>{
if（resp_data.status==200）{
setUserData（resp_data.data）
}
})
.catch（错误=>{
console.log（错误）
console.log（'错误'）
})
setLoggedIn（真）
}
否则{
setLoggedIn（假）
}
}
useffect（（）=>{
UpdateHeader（）
} , [])
返回(


工作



服务



下单



关于



接触



{
洛格丁？
{
user\u data&&user\u data.username？
{user_data.username}
：
用户
}


轮廓

{Logout（）}>
注销


:
登录
}
)
}
导出默认标题

您可以在自己的路径上呈现

标题

组件，而不是呈现主页或配置文件页面的路径。使用您希望标头组件的

路由

匹配的路径数组。假定“/”是您的主页，那么您可能还需要指定

确切的
道具，以便“/”与您拥有的每个路径都不匹配。当然，这也假设对于每个主页和概要文件页面，页眉组件呈现在页面上所有其他内容之前

例如：

<Router>
  <Route exact path={["/profile", "/"]} component={Header} />
  <Switch>
    <Route path="/profile" component={ProfilePage} />
    <Route path="/" component={HomePage" />
  </Switch>
</Router>


提取
标题<Router>
  <Route exact path={["/profile", "/"]} component={Header} />
  <Switch>
    <Route path="/profile" component={ProfilePage} />
    <Route path="/" component={HomePage" />
  </Switch>
</Router>