Conditional routing of components in react js

Question

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>

score 0 · Answer 1 · answered May 28 '20 at 15:30

There are a bunch of ways to conditional render components or jsx elements in react.

The Basic understanding you should grasp is: whenever you return false or falsey, it won't render.

There are a few techniques you could use, please refer to this article for more information

if conditional
ternary operator
&& operator (my personal favorite)
Switch statement

score 0 · Accepted Answer · answered May 28 '20 at 15:30

You need to check useLocation() inside this file in order to know which path you are currently on, and then hide that path.

Here is a post which shows how to use 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

Conditional routing of components in react js

2 Answers2