Обработка текущей открытой позиции в React с помощью React Router

Question

Для проекта у нас есть различные страницы MasterDetail. Эти страницы соответствуют следующим требованиям:

• Когда страница открыта, главный список выбирается из API.
• Когда основной список выбирается, первый элемент выбирается из список и API получают запрос на информацию об этом первом элементе.
• Идентификатор этого первого элемента добавляется в URL.
• Эта страница может быть отзывчивой, поэтому, если только Основной список виден, запрос API для заполнения подробного представления НЕ выполняется, если только окно не становится достаточно большим, чтобы показать подробности, и в этом случае запускается запрос API.
• Когда URL не имеет Идентификатор, мы создаем новый элемент.
• Вся система использует URL с идентификатором текущего открытого элемента.

В результате я пришел со следующим:

const history = useHistory();
const { id } = useParams();
const matches = useMediaQuery(theme.breakpoints.up('md'));

const [first, setFirst] = useState(false);

useEffect(() => {
  async function getData() {
    await Promise.resolve(Api.getUsers()).then(response => {
      response.data.endpoints.length > 0 && !first && !id && matches && history.push(`/settings/users/${response.data.endpoints[0].id}`);
      setFirst(matches);
    });
  }

  getData();
}, [history, first, matches, id]);

Объяснить: при каждом изменении history, first, matches or id запускается ловушка useEffect. Который получит данные с помощью функции. Это вызов метода API getUsers, который возвращает список пользователей (используя Ax ios для запросов API). Выполняется следующее выражение if:

ЕСЛИ длина списков больше 0, И ЕСЛИ мы никогда раньше не вызывали эту функцию, И ЕСЛИ в URL уже не установлен идентификатор (в случае, если кто-то пытается напрямую перейти к указанному элементу c) И ЕСЛИ пользовательский интерфейс соответствует точке останова, ТОГДА URL-адрес нажимается.

При изменении URL-адреса страница сведений вызывает запрос GET.

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

1. Когда для нового элемента запускается POST, основной список перезагружается с новым элементом, но обновление URL приводит к перезагрузке страницы сведений, что в этот случай нежелателен. Теперь это решается просто без записи идентификатора в URL, но мастер полагается на URL, чтобы указать, какой элемент активен (и, таким образом, это решение вообще не идеально).
2. Вход на страницу и быстрый выход из него приведет к тому, что React Router вернется на страницу, потому что, в то время как пользователь инициировал переход к / another / url, эта функция будет вызывать pu sh / settings / users /: id поверх этого.
3. Опять же, это грязно.

Надеюсь, понятно, что я хочу здесь делать. Есть ли лучшее решение для этого? Возможно, полагаться на URL для этого не путь к go?