Çözüldü React ile Sayfayı bölme işlemi nasıl yapılır?

249873 · 4 Eylül 2023

E ticaret sitesi için bir taslak oluşturuyorum.

Hesap sayfasına gittiğimde, sağ tarafta siparişler - kullanıcı bilgileri tarzında linkler olacak. Linke tıkladığımda sağ taraftan ulaşabileceğim. Bunu react router ile denedim. Ancak çalışmadı.

Sol taraf;

Sağ taraf;

RaSGooL · 4 Eylül 2023

Yapmak istediğin şey Layout.

Basit bir şekilde;

JSX:

import React from 'react'
import { Outlet } from 'react-router'

export const Layout = () => {
    
    return (
        <div>
            bla bla
            
            {/*Outlet kısmı sayfaların geleceği alan.*/}
            <Outlet />
        </div>
    )
}

Router;

JSX:

import React from 'react'
import {Route, Routes} from 'react-router'

export const Router = () => {
    
    return (
        <Routes>
            <Route path="no-layout" element={<NoLayoutPage />} />
            <Route path="/" element={<Layout />}>
                <Route path="about" element={<AboutPage />} />
                <Route path="" exact element={<HomeLandingPage />} />
        </Routes>
    )

}

Bu çok basit bir örnek. Authentication ve Authorize işleri girince karışıyor biraz. Ben şu şekil kullanmışım;

JSX:

<Route element={<ProtectedRoute roles={[ROLES.admin]} />}>
    <Route
        path='dashboard/*'
        element={
            <React.Suspense fallback={<AdminLoading />}>
                <AdminRouter />
            </React.Suspense>
        }
    />
</Route>

TheAny · 4 Eylül 2023

Flex yada grid body yada div içine sağ ve sol şeklinde koyarsan olur iki adet div atar ve onların içine ayarlarsan olur. İkisine de width 50% verirsin. Div'in birinin soluna diğerinin sağına border eklersen ortada da seperator olmuş olur.

249873 · 4 Eylül 2023

Zaten bu kadar kolay olmasını beklememek lazımdı

Bunların hepsini önceden yükleyip, display hidden, ve block şeklinde yapabilirim. Ama bu sayfayı yavaştır mı? Veya sizin farklı bir yöntem tavsiyeniz var mıdır?

TheAny dedi:
Flex'ya da Grid body ya da div içine sağ ve sol şeklinde koyarsan olur iki adet div atar ve onların içine ayarlarsan olur. İkisine de width 50% verirsin. Div'in birinin soluna diğerinin sağına border eklersen ortada da seperator olmuş olur.

Ben solda ki linklere tıkladığımda sağ'da başka bir sayfa görmek istiyorum.

TheAny · 4 Eylül 2023

iFrame kullanabilirsin yada; Çözüldü: HTML sayfa değiştirmeden içerik değiştirme

Konu ne kadar React olsada hala yapmak istediğin şey temelde zaten HTML'in ve JS'in sunduğu bir beceri. React server side, senin isteğin client side. Client bir linke tıkladığında diğer divin içerisinde istenilen sayfa olsun istiyorsan yapacağın şey ya ajax veya jquery veya benzeri bir yöntem ile sayfayı yükleyip bir dive aktarmak yada iFrame kullanmak. Server tarafında yapacağın bir şey değil bu.

249873 · 4 Eylül 2023

TheAny dedi:
iFrame kullanabilirsin yada; Çözüldü: HTML sayfa değiştirmeden içerik değiştirme

Konu ne kadar React olsada hala yapmak istediğin şey temelde zaten HTML'in ve JS'in sunduğu bir beceri. React server side, senin isteğin client side. Client bir linke tıkladığında diğer divin içerisinde istenilen sayfa olsun istiyorsan yapacağın şey ya ajax veya jquery veya benzeri bir yöntem ile sayfayı yükleyip bir dive aktarmak yada iFrame kullanmak. Server tarafında yapacağın bir şey değil bu.

Hocam bu tam anlamıyla sorunumu çözmüyor. Ben yukarı da url nin de değişmesini istiyorum.

Mesela sol tarafta ürün 1 ve ürün 2 linkleri olacak;
Sağ taraf ise şuan boş. Url ise şuan => siteadi.com/urunler

Ben ürün 1'e bastığımda. Sol taraf sabit kalacak. Sağ tarafta ise ürün 1 sayfası gelecek. Url ise siteadi.com/urunler/urun-1 şeklinde güncellenecek.

Bu url değişiminde sol taraf tekrar update olmasın.

Aslında sorunumun çözümü, react router. Ama bu yöntem şuan çalışmıyor.

Seçtiğim içeriye görede boş kısım dolsun işte. Örnek şablon böyle gösterebilirim sanırım.

TheAny · 4 Eylül 2023

Routelarla çözüleceğini düşünüyorum. React'ta nasıl çalışır tam bilmiyorum ama PHP'de şöyle yapardım ben; Sol menüyü db'den dolayısıyla serverdan getireceğim, garanti. Seçili olan ürünün aktif olması kısmını client tarafında JS ile yapabiliriz yada listelerken ürün id'sinden aktif ekleriz, fark etmez. Sağ taraf içinde oluşturduğum düzenleme sayfasını ekler ve id'den getiririm ürünü ardından ne yapcaksam yaparım. Yani full çalışan bir örnek sunmam uzun sürer diye 5-10 dakikada şöyle bir şey hazırladım. Daha iyi yazılabilir mantık muhtemelen ama aşağı yukarı böyle bir şey işine yaramalı.

Bu aşağıdaki return view(); React'takine benziyor olmalı. Yanılmıyorsam TS ile return {//Page content }
şeklinde döndürülüyor.

Ürün sayfası.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="display: flex; height: 80vh; width: 100%">
    <div class="siniflar buraya" id="urunlistesi" style="border: 2px solid; border-color:black; width: 20vw; margin: 5px; ">
        <?php //Ürünleri getirecek kod buraya ?>
        <a href="/urunler/urun-1">Urun Adi</a>
    </div>
    <div class="siniflar buraya" id="urungoruntule" style="border: 2px solid; border-color:black; width: 20vw; margin: 5px; width: 78vw;">
        <p>{{ $urunid ?? "" }}'e ait componentler burada.</p>
    </div>
</body>
</html>

Route kısmı.

PHP:

Route::get("/urunler/urun-{id}", function (string $id) {
    return view("urun", ["urunid" => $id]);
});

Route::get("/urunler", function() {
    return view("urun");
});

RaSGooL · 4 Eylül 2023

Yapmak istediğin şey Layout.

Basit bir şekilde;

JSX:

import React from 'react'
import { Outlet } from 'react-router'

export const Layout = () => {
    
    return (
        <div>
            bla bla
            
            {/*Outlet kısmı sayfaların geleceği alan.*/}
            <Outlet />
        </div>
    )
}

Router;

JSX:

import React from 'react'
import {Route, Routes} from 'react-router'

export const Router = () => {
    
    return (
        <Routes>
            <Route path="no-layout" element={<NoLayoutPage />} />
            <Route path="/" element={<Layout />}>
                <Route path="about" element={<AboutPage />} />
                <Route path="" exact element={<HomeLandingPage />} />
        </Routes>
    )

}

Bu çok basit bir örnek. Authentication ve Authorize işleri girince karışıyor biraz. Ben şu şekil kullanmışım;

JSX:

<Route element={<ProtectedRoute roles={[ROLES.admin]} />}>
    <Route
        path='dashboard/*'
        element={
            <React.Suspense fallback={<AdminLoading />}>
                <AdminRouter />
            </React.Suspense>
        }
    />
</Route>

249873 · 4 Eylül 2023

RaSGooL dedi:

Yapmak istediğin şey Layout.

Basit bir şekilde;

JSX:

import React from 'react'
import { Outlet } from 'react-router'

export const Layout = () => {
   
    return (
        <div>
            bla bla
           
            {/*Outlet kısmı sayfaların geleceği alan.*/}
            <Outlet />
        </div>
    )
}

Router;

JSX:

import React from 'react'
import {Route, Routes} from 'react-router'

export const Router = () => {
   
    return (
        <Routes>
            <Route path="no-layout" element={<NoLayoutPage />} />
            <Route path="/" element={<Layout />}>
                <Route path="about" element={<AboutPage />} />
                <Route path="" exact element={<HomeLandingPage />} />
        </Routes>
    )

}

Bu çok basit bir örnek. Authentication ve Authorize işleri girince karışıyor biraz. Ben şu şekil kullanmışım;

JSX:

<Route element={<ProtectedRoute roles={[ROLES.admin]} />}>
    <Route
        path='dashboard/*'
        element={
            <React.Suspense fallback={<AdminLoading />}>
                <AdminRouter />
            </React.Suspense>
        }
    />
</Route>

Yarın deniycem hocam çok sağolun.

Hocam şuan ben e ticaret sitesine backend bağlamayacağım. Router'de auth işlemlerini yaptırayım mı? Çünkü auth konusunda hiç bir şey bilmiyorum. Projeyi de biraz hızlı bitirmek istiyorum. Ama auth işlemlerini de öğrenmem lazım, bu projede işler çok karışır diye korkuyorum.

RaSGooL · 4 Eylül 2023

mahmutxd07 dedi:
Yarın deniycem hocam çok sağolun.

Hocam şuan ben e ticaret sitesine backend bağlamayacağım. Router'de auth işlemlerini yaptırayım mı? Çünkü auth konusunda hiç bir şey bilmiyorum. Projeyi de biraz hızlı bitirmek istiyorum. Ama auth işlemlerini de öğrenmem lazım, bu projede işler çok karışır diye korkuyorum.

Sen bilirsin. Sana güzel deneyimler katar. Ama biraz uğraştırır tabi. Şu anlık es de geçebilirsin. İleriki fazlarda eklersin.

Çözüldü React ile Sayfayı bölme işlemi nasıl yapılır?

Ayrıntılı düzenleme

249873

Kilopat

RaSGooL

TheAny

Gigapat

249873

Kilopat

TheAny

Gigapat

249873

Kilopat

TheAny

Gigapat

RaSGooL

Kilopat

249873

Kilopat

RaSGooL

Kilopat

Benzer konular