📐

동적 페이지 이동

•

ModifyPage.js 생성

import React from 'react';

function ModifyPage(props) {
    return (
        <div className='text-3xl font-extrabold'>
            Todo Modify Page
        </div>
    );
}

export default ModifyPage;
JavaScript
복사

•

ReadPage.js 수정

import React from 'react';
import { createSearchParams, useNavigate, useParams, useSearchParams } from 'react-router-dom';

function ReadPage(props) {

    const navigate = useNavigate();
    const { tno } = useParams()
    
    const [queryParams] = useSearchParams()

    const page = queryParams.get('page') ? parseInt(queryParams.get('page')) : 1
    const size = queryParams.get('size') ? parseInt(queryParams.get('size')) : 10

    const queryStr = createSearchParams({page:page, size:size}).toString()

    console.log(tno)

    /* queryString의 13?page=3&size=20 형태가 유지됨 */
    const moveToModify = (tno) => {
        navigate({
            pathname: `/todo/modify/${tno}`,
            search: queryStr
        })
    }

    const moveToList = () => {
        navigate({
            pathname: `/todo/list/`,
            search: queryStr
        })
    }

    return (
        <div className={'text-3xl'}>
            Todo Read Page {tno}
            <div>
                <button onClick={() => moveToModify(tno)}>Test Modify</button>
                <button onClick={moveToList}>Test List</button>
            </div>
        </div>
    );
}

export default ReadPage;
JavaScript
복사

•

라우팅 추가

import { lazy, Suspense } from "react"
import { Navigate } from "react-router-dom"

const Loading = <div className={'bg-red-700'}>Loading....</div>

const TodoList = lazy(() => import("../pages/todo/ListPage"))

const TodoRead = lazy(() => import("../pages/todo/ReadPage"))

const TodoAdd = lazy(() => import("../pages/todo/AddPage"))

const TodoModify = lazy(() => import("../pages/todo/ModifyPage"))         // 추가

/* jsx의 배열을 반환해주는 함수 */
const todoRouter = () => {
    return [
        {
            path: 'list',
            element: <Suspense fallback={Loading}><TodoList /></Suspense>
        },
        {
            path: '',
            element: <Navigate replace={true} to={'list'} />
        },
        {
            path: 'read/:tno', 
            element: <Suspense fallback={Loading}><TodoRead /></Suspense>
        },
        {
            path: 'add',
            element: <Suspense fallback={Loading}><TodoAdd /></Suspense>
        },
        {   // 추가
            path: 'modify/:tno',
            element: <Suspense fallback={Loading}><TodoModify /></Suspense>
        }
    ]
}

export default todoRouter
JavaScript
복사