인프런 커뮤니티 질문&답변
작성한 질문수
router 이동 질문 드립니다.
해결된 질문
작성
·
94
1
안녕하세요. 열심히 강의 듣고 있습니다. ...
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가 있습니다.
현재 ../products/add 에 있다고 했을때 add 페이지에 있는 버튼을 누르면 ../todo/add 로 점프해서 이동하려면 어떻게 navigate 해야되나요?
todo/add에서 todo/modify 이런식의 같은 폴더 레벨이면 쉽게 이동되던데 ...
답변 1
0
절대 경로를 이용해서 '/todo/add'로 이동하시면 됩니다.
예를 들면 현재 '/product/add' 경로에 보여주는 페이지에서 '/todo/add'로 이동하는 버튼을 만든다면 아래와 같습니다.
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;
감사합니다. ^^