React 11 – React Route

React route belirlediğimiz sayfamızı belirlediğimiz path’lere yönlendirmeyi sağlar.

Herhangi bir web sitesini düşünün. Mesela Facebook. Facebook’a ilk giriş yaptığınızda sizi anasayfa karşılar. Sonrasında profile gitmek isterseniz /kullaniciadi gibi bir path’e yönlendirir. Ya da arkadaşlarınızın listesini görmek isterseniz sizi /friends gibi bir path’e yönlendirir.

Biz de kendi sayfamızda sayfalar arası geçiş yapmak için route componentini kullanabiliriz. Bunun için terminale;

npm add react-router-dom 

yazıyoruz. Bu projemize route dom u ekleyecektir. Ben bu yazıyı yayınladığımda react router dom’un 6.versiyonu stable olmuştu. Dolayısı ile bu tarihten sonra react router dom’un 6.versiyonu ve daha sonraki versiyonları indirilecektir.

React Router Dom v6 ile birlikte bazı değişikliklere gitti. Ben de güncel olan bu bilgiler ile size router dom’u anlatacağım.

Bu konuyu örneklemek için, bir önceki yazımızdaki MyInputComponent’imizi kullanabiliriz. Bu component, dışardan title alıyordu ve bize bir input component oluşturuyordu. Bunun için öncelikle react route dom’ u import ememiz gerekiyor.

import React, { Component } from 'react';
import MyInputComponent from './MyInputComponent'
import { BrowserRouter , Route, Routes } from "react-router-dom";

class MyComponent extends Component {

Öncelikle şunu belirtelim ki, tüm Routerları bir BrowserRouter ile sarmallamamız gerekiyor. Bunu istersek index.js dosyasında yapabiliriz. İstersek daha başka bir yerde de yapabiliriz ama eğer React Route kullanacaksak, kullandığımız yerin BrowserRouter ile sarmallanması gerekiyor. Ben öncelikle MyComponent içinde bu sarmallamayı yapacağım.

import React, { Component } from 'react';
import MyInputComponent from './MyInputComponent'
import { BrowserRouter, Route, Routes } from "react-router-dom";


class MyComponent extends Component {

    render() {

        return (

            <BrowserRouter>
                
            </BrowserRouter>
        );
    }
}

export default MyComponent;

Bu BrowserRouter içinde artık Route kullanabiliriz. Bunun için de, örneğin,

anasayfa
gönderiler
arkadaşlar

adında 3 tane path’imiz olsun. Bu durumda 3 tane route kullanacağız. Bu 3 Route un da bir “Routes” ile sarmallanması gerekiyor. Yani;

import React, { Component } from 'react';
import MyInputComponent from './MyInputComponent'
import { BrowserRouter, Route, Routes } from "react-router-dom";


class MyComponent extends Component {

    render() {

        return (

            <BrowserRouter>
                <Routes>
                    <Route />
                    <Route />
                    <Route />
                </Routes>
            </BrowserRouter>
        );
    }
}

export default MyComponent;

Kodumuz yukarıdaki şekli aldı. Artık Route’dan bahsedebiliriz.

Öncelikle Route’un propertylerinden bahsedelim.

  • path: ilgili route’ın ilişkili pathini belirtmemize yarar.
    ‘/users/:userId’ şeklinde dinamik path parametreleri kullanılabilir.
    ‘/users/*’ yazarak, users ile başlayan tüm pathler için -eğer başka bir path ile eşleşmiyorsa- bu route geçerli hale gelir.
  • element: ilgili route için çalışacak JSX kodunu belirtmemize yarar.

Bizim 3 adet path’imiz olmalı. Bunlar:
“/”,
“/posts”,
“/friends”

Bunların Route’unu tanımlayalım:

 <BrowserRouter>
	<Routes>
		<Route path="/*" element={<MyInputComponent title="Anasayfa" />} />
		<Route path="/posts" element={<MyInputComponent title="Gönderiler" />} />
		<Route path="/friends" element={<MyInputComponent title="Arkadaşlar" />} />
	</Routes>
</BrowserRouter>

Burada anasayfanın path’ini ‘/*’ olarak belirtirsek, geçersiz olan her url için bu sayfaya yönlenecektir.

Bunun dışında, tanımlanan pathlerden birisi girilirse de, ilgili path’e yönlenecektir.

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir