Как вернуть jsx в зависимости от пути, по которому находится пользователь

Question

(Обратите внимание, что я полный новичок. Спасибо за ваше терпение.) У меня есть навигация в моем приложении React, где у меня есть 3 ссылки, но как только пользователь переходит на другой сайт, например, instance / about I хотелось бы, чтобы панель навигации возвращала другую ссылку вместо предыдущей, поэтому вместо значка чата, идущего в / chat справа от навигации, он должен измениться на значок учетной записи, который переходит в /about).

Я думал, что могу сделать оператор if / else в компоненте навигации для каждого пути. То есть: if (path == / about) {return (....)}

if (path == / home) {return (....)}

if ( path == / checkout) {return (....)}

Но мне не удалось запомнить, по какому пути сейчас находится пользователь.

Я пробовал гуглить и пробовать разные вещи, но, к сожалению, у меня ничего не работает. Думаю ли я о правильном решении этой функции? Если речь идет об использовании хуков против redux, тогда я бы хотел использовать хуки ..

Заранее большое спасибо!

Answer 1

Предполагая, что вы используете React Router, вы можете импортировать useLocation из 'response-router-dom`:

import { useLocation } from 'react-router-dom'

Ловушка useLocation предоставляет информацию о текущем URL, включая pathname, переменную, которую вы хотите включить:

// inside component:
const { pathname } = useLocation()

switch(pathname) {
  case '/checkout': {
    // return ...
  }
  case '/about': {
    // return ...
  }
  case '/home':
  default: {
    // return ...
  }
}