React Router-da Kök Marşrutun Yaradılması

Tez-tez əsas səhifəyə aparan əsas marşrut kök marşrut adlanır (root route), çünki digər marşrutlar onun daxilində render olunacaq. Onı ayrı bir komponent kimi təqdim etmək çox rahatdır. Buna görə gəlin təkrarən bizim tətbiqimizi götürək və src qovluğunda bir dənə daha yaradaq və onun adını routes qoyaq. İndi bu qovluqda ayrı bir React komponenti Root üçün root.jsx faylı yaradaq. Fayldakı kod belə görünəcək:

function Root() {
	return <div>Salam Router!</div>;
}

export default Root;

İndi gəlin main.jsx faylının bir hissəsində dəyişikliklər edək, çünki indi biz element dəyəri kimi Root komponentini ötürəcəyik, və onun məzmunu indi ayrı bir root.jsx faylındadır:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

main.jsx faylında bizim komponentlə olan import sətrini unutmayaq:

import Root from './routes/root';

Əvvəlki dərslərin tapşırıqlarında yaratdığınız tətbiqi açın. Kök marşrut üçün bu dərsdə təsvir olunduğu kimi, ayrı bir root.jsx faylında ayrı bir React komponenti Root yaradın. main.jsx faylınızda dəyişikliklər edin.