Условная маршрутизация компонентов в 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 () внутри этого файла, чтобы узнать, по какому пути вы сейчас находитесь, а затем скрыть этот путь.

Здесь - это сообщение, в котором показано, как использовать useLocation (). Затем вы можете использовать любой метод, которым хотите скрыть эту ссылку. Примером может быть:

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

после установки местоположения на текущий путь следующим образом:

const location = useLocation().pathname

Answer 2

Существует множество способов условного рендеринга компонентов или элементов jsx в реакции.

Основное c понимание того, что вы должны gr asp: всякий раз, когда вы возвращаете false или falsey, он не будет render.

Есть несколько методов, которые вы можете использовать, пожалуйста, обратитесь к этой статье для получения дополнительной информации

1. if условный
2. тернарный оператор
3. оператор && (мой личный фаворит)
4. Оператор переключения