react-router-dom사용 중 Route안에 Route를 쓸 때 주의점

react-router-dom을 사용할 때

보통은 Router 콤포넌츠를 만들어서:

const Router = () = >{
return (
	<HashRouter>
    	<Routes>
        	<Route path="/" element={<... />} />
            <Route path="/..." element={<... />} />
            <Route path="/..." element={<... />} />
        </Routes>
    </HashRouter>
 )
};

이런식으로 사용한다.

하지만 상황에 따라서, Route안에 또 Route가 들어가야하는 상황이 발생하는데, 이때 주의할 점이 있는다.

원래 첫 페이지를 정의할때는 path="/"라는 요소로 정의를 해준다.

하지만 Route안에 Route에서는 index라는 요소로 정의를 해줘야 한다.

그리고, 원래는 path="/.." 이렇게 페이지를 나누었다면, 여기서는 "/"를 빼줘야 한다.

예:

const Router = () = >{
return (
	<HashRouter>
    	<Header />
    	<Routes>
        	<Route path="/" element={<... />} />
            <Route path="/..." element={<... />} />
            <Route path="/..." element={<... />} />
            <Route path="/..." element={<Parent />}>
            	<Route index element={<... />} />
                <Route path="..." element={<... />}>
                <Route path="..." element={<... />}>
            </Route>
        </Routes>
        <Footer />
    </HashRouter>
 )
};

뿐만 아니라, 중첩 자식들의 출력위치를 정의해줘야한다.

위 예제를 보면, 콤포넌트에 출력이 되어야한다. 이 때는 react-router-dom에서 제공하는 Outlet 콤포넌트로 경로를 설정해줘야한다.

예:

const Parent = () => {
  return (
    <>
      <ParentHeader />
      <Outlet />
    </>
  );
};

이런식으로 중첩 자식들의 출력 위치를 설정해 준다.(위 예제에서는 Parent 콤포넌트에 위치를 설정해 줌)