React Router: 라우팅 기초와 레이아웃·Breadcrumbs

<BrowserRouter>
  <Header />
  <Routes>
    <Route path="/" element={<Main />} />
    <Route path="/product/*" element={<Product />} />
    <Route path="/admin" element={<AdminLayout />}>   {/* 부모: 안에 <Outlet /> */}
      <Route path="notice/list" element={<NoticeList />} />
    </Route>
    <Route path="*" element={<NotFound />} />          {/* 어디에도 맞지 않을 때 */}
  </Routes>
</BrowserRouter>

<Link to="/about">소개</Link>
 
// 현재 경로와 맞으면 활성 스타일. className·style에 함수를 넘긴다
<NavLink to="/profiles/velopert" className={({ isActive }) => (isActive ? 'active' : undefined)}>
  velopert
</NavLink>
<NavLink to="/" end>홈</NavLink> {/* end: 하위 경로에서는 활성으로 보지 않는다 */}
 
// 코드로 이동
const navigate = useNavigate()
navigate('/')                    // 이동
navigate(-1)                     // 뒤로 가기
navigate('/login', { replace: true }) // 기록을 남기지 않고 교체

// <Route path="/profiles/:username" element={<Profile />} />
function Profile() {
  const { username } = useParams()          // 값은 늘 문자열(또는 undefined)
  ...
}
 
function About() {
  const [searchParams, setSearchParams] = useSearchParams()
  const detail = searchParams.get('detail') === 'true'   // 쿼리 값도 문자열이다
  return <button onClick={() => setSearchParams({ detail: String(!detail) })}>토글</button>
}

<Route path="profiles" element={<Profiles />}>       {/* 유저 목록 + <Outlet /> */}
  <Route index element={<p>유저를 선택해 주세요.</p>} />  {/* /profiles 자체 */}
  <Route path=":username" element={<Profile />} />  {/* /profiles/velopert */}
</Route>

1. 떠나기 전: 위치별 키(location.key 또는 pathname + search)로 scrollY를 sessionStorage에 저장
2. 돌아왔을 때(POP 이동): 그 키의 값을 읽어 데이터가 그려진 뒤 window.scrollTo
3. 새 링크 이동(PUSH): 맨 위로

function AdminLayout() {
  const navigate = useNavigate()
  return (
    <>
      <Routes>
        <Route
          path="notice/list"
          element={<Button onClick={() => navigate("/notice/add")}>공지 등록</Button>}
        />
        {/* 다른 경로의 버튼들 */}
      </Routes>
      <Routes>
        <Route path="*" element={<PathBreadcrumbs labels={pathLabels} />} />
      </Routes>
      <Outlet />
    </>
  )
}

import { Breadcrumbs, Link, Typography, type LinkProps } from "@mui/material"
import { Link as RouterLink, useLocation } from "react-router"
 
const LinkRouter = (props: LinkProps & { to: string }) => (
  <Link {...props} component={RouterLink} />
)
 
// 예: { "/user/list": "회원 목록", "/user/detail/:id": "회원 상세", "/user/edit/:id": "회원 수정" }
type Props = { labels: Record<string, string> }
 
export default function PathBreadcrumbs({ labels }: Props) {
  const { pathname } = useLocation()
  const segments = pathname.split("/").filter(Boolean)
  const [feature] = segments
  const id = segments.find((s) => !Number.isNaN(Number(s)))
 
  const current = "/" + segments.map((s) => (Number.isNaN(Number(s)) ? s : ":id")).join("/")
  const paths = [current]
  if (/\/(edit|detail|add)/.test(current)) paths.unshift(`/${feature}/list`)
  if (current.endsWith("/edit/:id")) paths.splice(-1, 0, `/${feature}/detail/:id`)
 
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <LinkRouter underline="hover" color="inherit" to="/">
        Home
      </LinkRouter>
      {paths.map((path, index) => {
        if (!labels[path]) return null
        if (index === paths.length - 1) {
          return (
            <Typography key={path} color="text.primary">
              {labels[path]}
            </Typography>
          )
        }
        return (
          <LinkRouter
            key={path}
            underline="hover"
            color="inherit"
            to={id ? path.replace(":id", id) : path}
          >
            {labels[path]}
          </LinkRouter>
        )
      })}
    </Breadcrumbs>
  )
}