react js中組件的條件路由

Question

我的代碼如下所示。 我希望以這樣一種方式進行路由，即如果有約會路由處於活動狀態，那么登錄路由鏈接必須消失。 如果登錄組件正在路由，則約會路由鏈接必須消失。 我被卡住了。 我應該在這里輸入什么條件。

---

            <Link to="/" style={{height:'20px'}}><strong style={{fontSize:'15px' ,color:'#0'}}>Home</strong></Link>
            <Link to="/contact" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Appointment</strong></Link>
            <Link to="/services" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Services</strong></Link>
            <Link to="/Login" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Login For Doctors</strong></Link>
            <Link to="/Appointment" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Todays Appointment</strong></Link>
        </Navigation>

Answer 1

有很多方法可以在 react 中條件渲染組件或 jsx 元素。

您應該掌握的基本理解是：無論何時返回 false 或 false，它都不會渲染。

您可以使用一些技術，請參閱本文了解更多信息

1. 如果有條件
2. 三元運算符
3. && 運算符（我個人最喜歡的）
4. 切換語句

Answer 2

您需要檢查此文件中的 useLocation() 以了解您當前所在的路徑，然后隱藏該路徑。

這是一篇展示如何使用 useLocation() 的帖子。 然后，您可以使用任何您想要隱藏該鏈接的方法。 一個例子是：

  {location !== '/contact'
      <Link to="/contact" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Appointment</strong></Link>
       : null}

在將位置設置為當前路徑后，如下所示：

const location = useLocation().pathname