В React принято использовать маршруты из «react-router-dom». Одним из преимуществ использования Routes является реквизит маршрутизатора, который автоматически предоставляется вместе с маршрутом. Эти реквизиты маршрутизатора позволяют вам перемещаться вперед или назад в вашем приложении и полезны для отправки клиента в определенные места, когда он отправляет форму или нажимает кнопку или ссылку.

React-router-dom также предоставляет метод рендеринга, который используется для передачи реквизитов маршрутизатора определенному компоненту.

В этом примере явно показано, как реквизиты маршрутизатора передаются компоненту HomePage. Другие реквизиты также могут быть переданы компоненту вместе с реквизитами маршрутизатора.

В компоненте домашней страницы реквизиты будут использоваться для перехода пользователя на новую страницу и маршрутизации после успешного входа в систему. В компоненте домашней страницы есть метод handleSubmit, который вызывается после того, как пользователь вводит адрес электронной почты и пароль. После того, как запрос возвращается успешно, реквизиты маршрутизатора используются для добавления нового маршрута в историю.

Еще одна полезная часть реквизитов маршрутизатора — это свойство match, которое позволяет компоненту получить доступ к идентификатору из URL-адреса на странице. Снова реквизиты маршрутизатора будут переданы компоненту, которому требуется доступ к ним, с помощью метода рендеринга. Примером компонента, использующего свойство match, может быть случай, когда пользователь щелкает ссылку с определенным идентификатором и перенаправляется на страницу с этим идентификатором. Реквизиты маршрутизатора можно использовать в методе жизненного цикла реакции componentDidMount() для доступа к URL-адресу для загрузки правильной страницы.

Другой способ получить доступ к реквизитам маршрутизатора — добавить оператор импорта вверху компонента и импортировать «withRouter».

Затем в операторе экспорта по умолчанию в конце компонента вы должны обернуть компонент в «withRouter».

Существует несколько способов перенаправления или отправки пользователя на другой маршрут в приложении, и использование реквизитов маршрутизатора — это одно из решений, которое можно успешно использовать с историей и свойствами сопоставления.