중첩 라우팅 사용법

 

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/home" element={<Home />}>
                    <Route path="sub1" element={<Sub1 />} />
                    <Route path="sub2" element={<Sub2 />} />
                    <Route path="sub3" element={<Sub3 />} />
                </Route>
            </Routes>
        </Router>
    );
}

export default App;

function Home() {
    return (
        <div>
            <h2>Home</h2>
            <Outlet /> {/* 여기에 자식 경로 컴포넌트가 렌더링됩니다. */}
        </div>
    );
}

export default Home;

=> 이 경우 h2태그는 그대로이고 Outlet부분만 계속 path별로 바뀐다.

 

부모 컴포넌트에서 자식 컴포넌트로 이동하고 싶은 경우

 

1. Link 컴포넌트를 사용하여 이동하기

Link 컴포넌트를 사용하면, 사용자가 버튼이나 링크를 클릭했을 때 자식 컴포넌트로 쉽게 이동할 수 있습니다.

-

• <Link to="sub1 ">Go to Map</Link>: 이 링크를 클릭하면 /home/sub1 경로로 이동하며, Sub1컴포넌트가 Outlet에 렌더링됩니다.

2. useNavigate 훅을 사용하여 프로그래밍 방식으로 이동하기

useNavigate 훅을 사용하면, 코드에서 프로그래밍적으로 경로를 변경할 수 있습니다. 예를 들어, 버튼 클릭 시 자식 컴포넌트로 이동할 수 있습니다.

function Home() {
    const navigate = useNavigate();

    const goToSub1 = () => {
        navigate('sub1'); // /home/sub1 경로로 이동
    };

    return (
        <div>
            <h2>Home</h2>
            <button onClick={goToSub1}>Go to Map</button>
            <Outlet />
        </div>
    );
}

 

• navigate(' sub1 '): 이 함수를 호출하면 /home/sub1 경로로 이동하게 됩니다.

요약

• Link 컴포넌트: 사용자 인터페이스에서 링크를 클릭하여 다른 경로로 쉽게 이동할 수 있도록 합니다. 이 방법은 일반적인 네비게이션 링크에 적합합니다.
• useNavigate 훅: 프로그래밍 방식으로 경로를 변경해야 할 때 사용합니다. 예를 들어, 버튼 클릭이나 특정 조건이 충족되었을 때 경로를 변경할 수 있습니다.

이 방법들을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 쉽게 이동할 수 있으며, 사용자 경험을 개선할 수 있습니다.