중첩 라우팅

라우트 안에 라우트

 

<Route path="/articles" element={<Articles />}>
  <Route path=":id" element={<Article/>}></Route>
</Route>

이렇게 하면

/articles/:id임.

마치 스프링 컨트롤러에서 class레벨에 Mapping 지정해주고, 컨트롤러 메소드마다 추가로 지정해주는 거랑 똑같네.

 

저기 안에 들어가 보면,

 

import React from "react";
import { Outlet } from "react-router-dom";
import "../scss/Articles.scss";

const Articles = () => {

  return (
    <div>
      <ul>
        <ArticleItem id={1}/>
        <ArticleItem id={2}/>
        <ArticleItem id={3}/>
      </ul>
      <Outlet></Outlet>
    </div>
  );
};

 

저 Outlet이, 내부 라우터에 준 컴포넌트가 들어갈 수 있는 공간임.

즉, 위 같은 경우 /articles 해서 들어가면 저 Outlet 부분 안나오지만(지정을 안했으니까),

/articles/1 해서 들어가면, 저 Outlet부분, 즉 /articles/:id로 할당한 컴포넌트 Article이 저 ul 아래 부분에 나타남.

 

애초에 Route해서 지정하는 곳 들은 해당 url시 거기에 element해서 준 컴포넌트를 나타나게 하겠다는 건데,

그게 저 Outlet이라는 이름으로 대신한다고 생각하면 됨

 

 

 

 

 

 

 

 

<Route element={<Layout/>}>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/profile/:username" element={<Profile />} />
</Route>

 

import React from 'react'
import { Outlet, useNavigate } from 'react-router'

const Layout = () => {
  const navigate = useNavigate();
  const goBack = ()=>{
    navigate(-1);
  }

  const goArticles = ()=>{
    navigate('/articles', {replace:true});
  }

  return (
    <div>
      <header style={{backgroundColor:'lightgray', padding:16, fontSize:24}}>
		...헤더입니다
      </header>

      <main>
        <Outlet/>
      </main>
    </div>
  )
}

export default Layout

뭐 그냥 저렇게 했는데, 나는 솔직히 이게 더 복잡해 보이고,

그냥 header , main을 애초에 나눈 뒤 그걸 App에 기본으로 잡고 main부분에 Route 들을 넣을 듯.

 

여튼 이것도 해당되는 url이 들어오면 저 main 안의 Outlet에 나타나니까.