Угњежђене руте у Реацт Роутер-у

У овом часу ћемо се упознати са угњежђеним рутама. Покрените апликацију коју смо правили у претходном часу. Кликом на везе, долазимо на посебну страницу са производом. Претпоставимо да нам то није згодно и желели бисмо да се листа производа и страница производа приказују једно поред другог, на једном екрану за већу јасноћу. Хајде да то и урадимо.

За то хајде да отворимо фајл main.jsx и једноставно учинимо нашу руту за страницу производа подређеном рути коренске руте или, другим речима, "угнездимо" је у коренску руту. За то ћемо искористити још једно својство објекта руте children:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Клицамо по везама поново, али десно од листе производа не видимо ништа. Зато што нисмо рекли коренској рути где желимо да прикажемо њене подређене руте.

Управо за приказ елемената подређених рута у родитељској ће нам помоћи компонента Outlet. Хајде да је увеземо из библиотеке у фајл за коренску руту:

import { Outlet } from 'react-router-dom';

Затим ћемо је обмотати у див #product и додати у распоред за коренску руту на крају верстања после затварајуће тага nav, а целу конструкцију обмотати још у један див #main:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Клицајући по везама, сада видимо и листу производа и страницу производа.

Додајмо мало стилова у наш index.css:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Узмите апликацију коју сте направили у задатку за претходни час. Користећи материјале са часа, учините руту за страницу студента угњежђеном у коренску.

А сада учините да при клику на везе на екрану буде приказана и листа студената и страница студента.