React Router'da Kök Rota Oluşturma

Ana sayfaya giden ana rotaya genellikle kök rota (root route) denir, çünkü diğer rotalar onun içinde render edilecektir. Bunu ayrı bir bileşen olarak düşünmek çok uygundur. Bu yüzden uygulamamızı tekrar alalım ve src klasöründe bir tane daha oluşturup routes olarak adlandıralım. Şimdi bu klasörde, ayrı bir React bileşeni Root için root.jsx dosyasını oluşturalım. Dosyadaki kod şöyle görünecek:

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

export default Root;

Şimdi main.jsx dosyasının kodunda değişiklik yapalım, çünkü element değeri olarak artık Root bileşenini ileteceğiz ve onun içeriği artık ayrı bir root.jsx dosyasında:

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

Root bileşenimizin import satırını main.jsx'te unutmayalım:

import Root from './routes/root';

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı açın. Kök rota için, bu derste anlatıldığı gibi, ayrı bir root.jsx dosyasında ayrı bir React bileşeni Root oluşturun. main.jsx dosyanızda değişiklikler yapın.