React Router'a Yönlendirici Ekleme

Yönlendiricilere biraz aşina olduktan sonra, uygulamamıza bir tanesini ekleyebiliriz.

Fakat öncelikle, önceki derslerde oluşturduğumuz uygulama şablonumuzu biraz temizlememiz gerekiyor. Daha spesifik olarak - src klasörüyle ilgileneceğiz. İçinden assets klasörünü, dosyaları App.css, App.jsx atın. Kısacası, içinde sadece main.jsx ve index.css kalsın.

index.css dosyasını açın ve tamamen temizleyin. Boş kalsın.

Şimdi ana dosyamız main.jsx ile ilinelim. İçinde şu kodu olacak:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Ve şimdi yönlendiriciyi ekleyebiliriz. BrowserRouter kullanacağız, çünkü web uygulamalarında en sık kullanılan budur. Modern sözdizimini de unutmayalım. İçe aktarma satırını ekleyelim:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Sonra, bir router sabiti oluşturalım ve BrowserRouter'ımızı içe aktarma satırlarından sonra oluşturalım. Bunu, ana sayfada 'Hello Router!' yazısı bulunan bir div'in görüntülenmesi için yapalım. Bunun için ana sayfanın yolunu ve görüntüleyeceğimiz elementi tanımlayalım:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Ayrıca RouterProvider bileşenini eklememiz ve yukarıda oluşturduğumuz yönlendiriciyi atamamız gerekiyor. Tüm yönlendirici nesnelerini alır, uygulamamızı render eder ve diğer API'leri bağlar:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Tam kod şu şekilde görünecek:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Değişiklikleri kaydedelim. Tebrikler! Bizim uygulamamız artık hata vermiyor. Şimdi, eğer başlatırsak, tarayıcıda ana sayfada 'Hello Router!' yazısını göreceğiz.

Verilen materyali kullanarak, önceki derslerin ev ödevlerinde oluşturduğunuz uygulamanızın ana sayfasında, 'I'm number one in React!' metni ile bir paragraf görüntülenecek şekilde yapın.