Создание вложенных маршрутов на react-router и рендер разного состояния Header

Question

Всем привет! Сейчас на проекте имею такую структуру

<div className='App'>
        <Header />
          <Switch>
            <Route exact path='/claims'>
              <Claim />
            </Route>
            <Route exact path='/claims/appeal'>
              <ClaimForm
              />
            </Route>
            <Route exact path='/delays'>
              <Delay />
            </Route>
            <Route exact path='/delays/appeal'>
              <DelayForm
              />
            </Route>
          </Switch>
    </div>

У всех компонентов общий Header, в котором есть кнопка при нажатии на которую в зависимости от того на какой ты странице находился отправляет на страницу с той или иной формой, я это реализовал следующим образом:

function Header({ searchResult }) {
  const [isAppeal, setIsAppeal] = useState(false);

  function handleClickAppealButton() {
    history.push(`${location.pathname}/appeal`);
    setIsAppeal(!isAppeal);
  }

  function handleBtnGoBack() {
    history.goBack();
    setIsAppeal(!isAppeal);
  }

  return (
    <header className='header'>
      {isAppeal ? (
        <button className='btn btn_place_header' onClick={handleBtnGoBack}>
          Назад
        </button>
      ) : (
        <nav className='header__nav'>
          <SearchForm searchResult={searchResult} />
          <button
            className='btn btn_place_header'
            onClick={handleClickAppealButton}
          >
            Внести заявку
          </button>
          <button className='btn btn_place_header'>Выйти</button>
        </nav>
      )}
    </header>
  );
}

  );

Как мне сделать чтобы переходя на страницу с формами менялся header и там была кнопка назад, пытался через state переменную, через условие для пути, но получается очень криво, а именно если обновишь страницу будет header, как обычно с кнопкой для внесения заявок. Как создать нормальную вложенность маршрутов и отрисовку headera в зависимости от маршрута

Answer 1

Вам нужно хранить промежуточное состояние либо в sessionStorage (нативное средство), либо с помощью Redux.

Первый вариант решает в лоб вашу проблему избегая сторонние зависимости от библиотек

В момент перехода на форму сохраните состояние:

sessionStorage.setItem('userAtForm', true);
sessionStorage.setItem('prevPageURI', "ссылка на предыдущую страницу");

После перехода на форму в компоненте Header получите значения и сформируйте нужный UI:

 if (sessionStorage.getItem('userAtForm')){
     return <a href={sessionStorage.getItem('prevPageURI')}>Вернуться</a>
 }

Учтите что sessionStorage держит состояние в рамках одной сессии. После перезагрузки страницы хранилище очистится

Answer 2

Я решил проблему следующим образом, пришлось хардкодить немного. в App.js создал следующую функцию:

  const isButtonShownOnAppeal = () => {
    const locations = ['/claims/appeal', '/delays/appeal'];
    return locations.includes(location.pathname);
  };

И ее передаю пропсом в нужные мне компоненты

БЛОГ НА HUSL

Создание вложенных маршрутов на react-router и рендер разного состояния Header

Ответы (2 шт):