Стварэнне каранёвага маршруту ў React Router

Часта асноўны маршрут, які вядзе на галоўную старонку, называюць каранёвым (root route), паколькі іншыя маршруты будуць рэндэрыцца ўнутры яго. Вельмі зручна ўявіць яго асобным кампанентам. Таму давайце зноў возьмем наша прыкладанне і ў тэчцы src створым яшчэ адну і назвам яе routes. Цяпер у гэтай тэчцы створым файл root.jsx для асобнага React кампанента Root. Код у файле будзе выглядаць так:

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

export default Root;

А цяпер давайце ўнесем змены ў кавалачак коду файла main.jsx, паколькі ў якасці значэння element мы цяпер будзем перадаваць кампанент Root, а яго змест цяпер знаходзіцца ў асобным файле root.jsx:

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

Не забудзем радок імпарту з нашым кампанентам у main.jsx:

import Root from './routes/root';

Адкрыйце прыкладанне, створанае вамі ў заданнях да мінулых урокаў. Стварыце для каранёвага маршруту асобны React кампанент Root у асобным файле root.jsx, як апісана ў даным уроку. Унесіце змены ў ваш main.jsx.