router 이동 질문 드립니다.

안녕하세요. 열심히 강의 듣고 있습니다. ...

react에서 router 이동에 궁금한거 잇어서 질문 드려요

1

root 의 라우터에는 TodoIndex와 ProductsIndex 2개의 페이지가 있습니다.

............ 생략 ..............

{

path: "todo",

element: ...<TodoIndex/>...,

children: todoRouter()

},

{

path: "products",

element: ... <ProductsIndex/>...,

children: productsRouter()

}

2.

TodoIndex의 child은 todoRoter이고 add의 TodoAdd와 mdify의 TodoModify가 있습니다.

{

path: "add",

element: ...<TodoAdd/>...

}, {

path: "modify/:tno",

element: ...<TodoModify/>...

}

ProductsIndex의 child은 productsRouter이고 add의 ProductList와 mdify의 ProductModify가 있습니다.

3. 현재 ../products/add 에 있다고 했을때 add 페이지에 있는 버튼을 누르면 ../todo/add 로 점프해서 이동하려면 어떻게 navigate 해야되나요?

   todo/add에서 todo/modify 이런식의 같은 폴더 레벨이면 쉽게 이동되던데 ...

import React from 'react';
import {useNavigate} from "react-router-dom";

function ProductAddPage(props) {


    const navigate = useNavigate();

    const handleClickAdd = () => {
        navigate('/todo/add');
    }


    return (
        <div className="text-3xl font-extrabold">
            Product Add Page


            <div>
                <button onClick={handleClickAdd}>GO Todo Add</button>
            </div>

        </div>
    );
}

export default ProductAddPage;