# Редирект на другой маршрут в React Router

Теперь данные занесенные в форму при редактировании продукта сохраняются, но есть одно НО - после сохранения данных мы остаемся на странице с формой, а нам надо попасть обратно на страничку продукта. В этом нам поможет редирект, с которым мы познакомимся на этом уроке.

Давайте откроем файл `edit.jsx` и импортируем `redirect` из библиотеки:

`import redirect from 'react-router-dom';`

А затем сделаем так, что функция `action` будет теперь возвращать не `1`, а перенаправлять нас на нужный маршрут. В данном случае нам необходимо вернуться обратно на страничку с продуктом:

`return redirect(`/products/${params.productId}`);`

Теперь, нажимая кнопку сохранения, мы попадаем обратно на страничку продукта с обновленными данными.

Все тоже самое мы можем проделать и для добавления нового продукта, ведь наверное было бы удобней сразу выходить на форму и заполнять ее. Давайте так и сделаем.

Для начала нам необходимо теперь открыть файл `root.jsx` и импортировать `redirect`. Поскольку добавление продуктов происходит на корневой страничке:

`import redirect from 'react-router-dom';`

Снова берем функцию `action` и теперь будем возвращать не `product`, а делать редирект на страничку редактирования:

`return redirect(`/products/${product.id}/edit`);`

Проверим и это. Кликнем теперь на кнопку добавления продукта и увидим форму для его редактирования

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, реализуйте в нем редирект на страничку студента после нажатия кнопки сохранения данных на страничке с формой.

А теперь реализуйте редирект с главной страницы на страницу с формой редактирования данных студента после клика по кнопке добавления студента в список.

← →
↑