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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
2

249873

Kilopat
Katılım
17 Şubat 2019
Mesajlar
5.050
Çözümler
20
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;
1693830731583.png


Sağ taraf;
1693830660209.png
 
Son düzenleyen: Moderatör:
Çözüm
RaSGooL
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>
Tarihe göre sırala Puana göre sırala
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.
 
Artı 0 Eksi
Zaten bu kadar kolay olmasını beklememek lazımdı :D

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.
Genişletmek için tıkla...

Ben solda ki linklere tıkladığımda sağ'da başka bir sayfa görmek istiyorum.
 
Artı 0 Eksi
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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
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.

Untitled.png


Seçtiğim içeriye görede boş kısım dolsun işte. Örnek şablon böyle gösterebilirim sanırım.
 
Son düzenleyen: Moderatör:
Artı 0 Eksi
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");
});
1693844753342.png
 
Artı 0 Eksi
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>
 
Artı 0 Eksi
Çözüm
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>
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
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.
 
Artı 0 Eksi

Benzer konular

2
  • Çözüldü
Çözüldü  React ile slider nasıl yapılır?
2
Mesaj
11
Görüntüleme
1.356
oynozan
oynozan
Junji Ito
ASP.NET ile form gönderme işlemi nasıl yapılır?
Mesaj
2
Görüntüleme
613
Junji Ito
Junji Ito
2
React ile state içinde veri olup olmadığı kontrolü nasıl yapılır?
Mesaj
5
Görüntüleme
498
oynozan
oynozan
Y
Sayfayı açtıktan sonra resimlerin yüklenmesi nasıl yapılır?
Mesaj
5
Görüntüleme
253
yazilimologgg31
Y
Jibijeb
React ile bir sayfadaki bilgiler kullanarak yeni sayfa oluşturma nasıl yapılır?
Mesaj
3
Görüntüleme
1.506
qelos
qelos

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı