[英]Conditional routing of components in react js
My code is as shown below.我的代码如下所示。 I want routing in such a way that if there is Appointment route active then login route link must be disappear.
我希望以这样一种方式进行路由,即如果有约会路由处于活动状态,那么登录路由链接必须消失。 And if login component is routing then Appointment route link must be disappear.
如果登录组件正在路由,则约会路由链接必须消失。 I got stucked.
我被卡住了。 What condition should I enter here.
我应该在这里输入什么条件。
<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>
There are a bunch of ways to conditional render components or jsx elements in react.有很多方法可以在 react 中条件渲染组件或 jsx 元素。
The Basic understanding you should grasp is: whenever you return false or falsey, it won't render.您应该掌握的基本理解是:无论何时返回 false 或 false,它都不会渲染。
There are a few techniques you could use, please refer to this article for more information您可以使用一些技术,请参阅本文了解更多信息
You need to check useLocation() inside this file in order to know which path you are currently on, and then hide that path.您需要检查此文件中的 useLocation() 以了解您当前所在的路径,然后隐藏该路径。
Here is a post which shows how to use useLocation(). 这是一篇展示如何使用 useLocation() 的帖子。 Then you can use any method you want to hide that link.
然后,您可以使用任何您想要隐藏该链接的方法。 An example would be:
一个例子是:
{location !== '/contact'
<Link to="/contact" style={{height:'20px'}}><strong style={{fontSize:'15px'}}>Appointment</strong></Link>
: null}
after setting location to the current path like this:在将位置设置为当前路径后,如下所示:
const location = useLocation().pathname
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.