📐

경로값 추출을 위한 useParams

•

root.js

import { Suspense, lazy } from "react";
import todoRouter from "./todoRouter";

const { createBrowserRouter } = require("react-router-dom");

const Loading = <div className={'bg-red-700'}>Loading....</div>
const Main = lazy(() => import("../pages/MainPage"))

const About = lazy(() => import("../pages/AboutPage"))

const TodoIndex = lazy(() => import("../pages/todo/IndexPage"))

const root = createBrowserRouter([
    {
        path: "",
        element: <Suspense fallback={Loading}><Main/></Suspense>
    },
    {
        path: "about",
        element: <Suspense fallback={Loading}><About/></Suspense>
    },
    {
        path: "todo",
        element: <Suspense fallback={Loading}><TodoIndex /></Suspense>,
        children: todoRouter()
    }
])
export default root;
JavaScript
복사

•

todoRouter.js

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"))

/* 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>
        }
    ]
}

export default todoRouter
JavaScript
복사

•

ReadPage.js

import React from 'react';
import { useParams } from 'react-router-dom';

function ReadPage(props) {

    const {tno} = useParams()

    console.log(tno)

    return (
        <div className={'text-3xl'}>
            Todo Read Page
        </div>
    );
}

export default ReadPage;
JavaScript
복사