在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

你需要在这个文件里面检查useLocation()，以便知道你当前在哪个路径上，然后隐藏这个路径。

这里是 是一篇介绍如何使用Location()的文章。然后你可以使用任何方法来隐藏这个链接。一个例子是

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

像这样把位置设置为当前路径后，

const location = useLocation().pathname

Answer 2

在react中，有一堆方法可以有条件的渲染组件或jsx元素。

你应该掌握的基本理解是：只要你返回false或falsey，它就不会渲染。

有一些技术你可以使用，请参考以下内容 本文 更多信息

1. 如果有条件
2. 三元运算符
3. ＆amp;＆amp;运营商（我个人最喜欢的）。
4. 转换声明