# Добавление ещё одного маршрута в React Router

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

Для начала давайте откроем наше приложение, которое мы делали на прошлых уроках и создадим в папке `routes` файл `product.jsx`. Сделаем в нем компонент `Product`:

`function Product() {} export default Product;`

Теперь создадим внутри `Product` объект `product`, со свойствами `name`, `cost` и `amount`, пока это будут некоторые фиксированные значения:

`function Product() { const product = { name: 'Product', cost: 400, amount: 5, }; } export default Product;`

И на страничке продукта мы будем выводить, соответственно, его название, стоимость и количество:

`return ( <div> <h2>Product page</h2> <p>Name: {product.name}</p> <p>Cost: {product.cost}</p> <p>Amount: {product.amount}</p> </div> );`

Обязательно добавим импорт компонента `Product` в файл `main.jsx`:

`import Product from './routes/product';`

И, наконец, добавим еще один маршрут в наше приложение, сделаем это сразу после корневого. В качестве пути укажем `'products/:productId'`, а в качестве элемента для отображения у нас выступает компонент `Product`:

`{ path: '/', element: <Root />, errorElement: <ErrorPage404 />, }, { path: 'products/:productId', element: <Product />, },`

А теперь запускаем приложение, кликаем по ссылкам и оказываемся на страничке с продуктом (пока она у нас одинаковая для всех ссылок), а не с ошибкой.

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, создайте подобным образом файл `student.jsx`, пусть на страничке студента будет выводиться его имя, фамилия, год поступления и специальность. Добавьте новый маршрут для странички студента в файле `main.jsx`, установите значение `path` в `'students/:studentId'`. Убедитесь, что при клике по ссылкам вы попадаете теперь на страничку студента.

← →
↑