Использование React-Router для навигации между компонентами на одной странице

Я работаю над todo list, где у нас одна главная страница со списком пунктов, а все манипуляции с ними (создание, редактирование, просмотр) происходят через модальные окна, и теперь мне нужно добавить некую "маршрутизацию" для эти модальные окна (например, пользователь вставляет определенный URL-адрес в адресную строку браузера, и приложение должно отображаться с открытым модальным окном)

Я рассматриваю возможность добавления хэша к URL-адресу, например. для создания это должно быть «#create-task», а затем обрабатывать изменение хэша в пользовательском useEffect следующим образом:

  useEffect(() => {
    if (location.hash === 'create-task') {
      openCreateTaskModal();
    } else if (location.hash === 'view-task') {
      openViewTaskModal(id); // "id" also should be parsed from URL
    }
  }, [location.hash])

Что вы думаете об этом решении, может быть, есть лучшие способы реализовать это?