Javascript React js-在特定路由中切换组件

我想知道在某个路由中如何切换或隐藏组件。在我的例子中，我希望在/dashboard路由中隐藏header组件，以便用新组件替换它，以便用户看到。提前感谢任何能提供帮助的人

使用react router，您可以调用useLocation（）查看当前url。因此，您可以这样做：

function MainHeader () {
    return (
        <div>
             main header
        </div>
    )
}

function StaffHeader () {
    return (
        <div>
            Staff header
        </div>
     )
  }

function Header() {
    const [staffHeader, seStaffHeader] = useState(false)
    const location = useLocation()
    
    useEffect(()=> {
           setStaffHeader(location.pathname === "/dashboard")
    },[location])
    
    return (
        <div>
            {staffHeader ? <StaffHeader/> : <MainHeader/>}
        </div>
    )
}

函数main头（）{
返回(
主割台
)
}
函数StaffHeader（）{
返回(
参谋长
)
}
函数头（）{
const[staffHeader，seStaffHeader]=useState（false）
const location=useLocation（）
useffect（（）=>{
setStaffHeader（location.pathname==“/仪表板”）
}，[地点]）
返回(
{staffHeader？：}
)
}

上面有两个标题-MainHeader和StaffHeader。 我们在应用程序中调用Header。每次位置更改时，useEffect将检查位置是否等于“/dashboard”，并更新staffHeader变量的状态。Header组件有一个三元运算符，根据StaffHeader变量的状态返回MainHeader或StaffHeader

链接到以下路由器：

上面的这个解决方案应该可以解决这个问题。然而，更糟糕的是，您可以通过控制用户权限的路由身份验证组件获得更具可伸缩性的解决方案。下面的链接将为这件事提供一个好的、简单的起点。

---

如果有一个

头

组件，将特定头渲染到交换机内的特定路由中，并跳过本地组件状态，那将更干净、更惯用。是的！事实上，这会更好。我将编辑答案，添加一个后续观察链接，为遇到这个问题的用户在线发布一篇关于这个问题的好帖子。