React Router Kullanımı

Herkese merhabalar,bildiğim kadarıyla sizlere react routeri anlatmaya çalışacağım.

Router Neden Kullanırız ?

SPA uygulamalarda sayfa içerisinde gezinmek için kullandığımız yapılardır.

Proje Oluşturma

npx create-react-app router-app

ardından terminal ekranında npm start diyerek projeyi ayağa kaldırıyoruz

React-Router Kurulumu

npm install react-router
# veya
yarn add react-router

adımları izlenerek ilgili projeye router eklenir.

Aşağıdaki kod örneğinde olduğu gibi src/App.js dosyasında react-router-dom ‘ u projenize dahil edebilirsiniz.

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

React-Router Kullanımı

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
          <Route path="/hakkimizda" component={Hakkimizda} />                            
          <Route path="/kullanicilar" component={Kullanicilar} />           
          <Route path="/" component={Anasayfa}>
    </Router>
  );
}
function Hakkimizda() {
  return <h2>Hakkımızda Sayfası</h2>;
}

function Kullanicilar() {
  return <h2>Kullanıcılar Sayfası</h2>;
}

function Anasayfa() {
  return <h2>Ana Sayfa</h2>;
}

Router : Tanımlanan Yerlere Sayfaların Render Edileceğini Bildirdik.

Route : Yeni Bir Sayfa Tanımı Oluşturduk.

Route componentinin path özelliği: Tarayıcıdan hangi url ile erişeceğimizi belirtir.

Route componentinin özelliği : İlgili path özelliği geldiğinde hangi componenti render edeceğini belirtir.

react router kullanarak,sayfaları router tag’ları arasına render edeceğimizi ve ilgili route ların yol tanımlamalarını ve render edeceği sayfaları belirlemiş olduk.

Herkese İyi Çalışmalar :)