如何在 React 中使用身份验证位置在登录和注册页面中隐藏导航栏.js

Question

这里我尝试过使用Location隐藏，但登录并注册后导航栏不显示

return (
<div className="App background-Color">

{
location.pathname === '/LogIn' && location.pathname === '/patientSignUp' && <Navbar/>
}
)

Answer 1

因为您的逻辑是错误的。如果我们调用location.pathname＝＝'/LogIn'是A，location.pathname===='/papatientSignUp'是B。所以我们有三个案例：

1. 您在/login:A必须true，B必须false=>A&amp；B=错误=>隐藏导航栏
2. 您在/ppatientSignUp:A必须是false，B必须是true=>A&amp；B=错误=>隐藏导航栏
3. 您已登录或注册：A必须为false，B必须为false=>A&amp；B=错误=>隐藏导航栏

这里有两个解决方案：

1. 您可以有两个布局，在身份验证模块中，您使用Blank Layout，完成所有操作后，使用Layout have NavBar。您可以使用react路由器dom v6来实现它
2. 更改逻辑：
   {location.pathname==='/LogIn'？null:location.pathname==='/papatientSignUp'？null：<导航栏/>}