Установка параметров URL-адреса с помощью React, React Router и Firebase (useParams или useRouteMatch)?

Question

То, что я реализую:

Я использую React (с использованием хуков), React Router и Firebase для проекта, и я хотел использовать documentId в качестве URL-адреса когда щелкают по документу. URL-адрес будет выглядеть так: https://website.com/view-companies/sdf920k1

Приложение. js

<Route path="/view-companies/:documentId" component={ViewCompany} />

Моя проблема:

Я настроил свой путь маршрута в своем приложении. js с: documentId в качестве параметра, но я не уверен, какой хук ( useParams или useRouteMatch ) для использования, и если мне что-то не хватает в настройке.

Когда я запрашиваю Cloud Firestore, и он возвращает 7 документов, я хочу выбрать документ, и этот documentId используется в URL-адресе. Я попытался найти пример этой настройки для Firebase на Github, но безуспешно.

Answer 1

Когда вы нажимаете на документ, вы можете обновить URL-адрес историей, например

const Component = () => {
   const history = useHistory();

   const handleClick = (documentId) => {
      history.push(`/view-companies/${documentId}`);
   }

   ...
}

PS Если вы используете v6 для response-router, вы должны использовать useNavigate вместо useHistory

Теперь в компоненте, который вы визуализируете на основе маршрута, вы можете использовать useParams для получения параметров

const ViewCompany = () => {
   const { documentId } = useParams();
   // do what want with documentId 

   ...
}