Добавление ещё одного маршрута в 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'. Убедитесь,
что при клике по ссылкам вы попадаете
теперь на страничку студента.