react-router-dom V6

react-router-dom의 새로운버전인 V6의 전반적인 내용을 정리해보자

경로구성

BrowserRouter > Routes > Route 구조이고, 이전버전보다 명확하게 동적라우팅구현이 가능하다. 또한 element속성으로 컴포넌트를 렌더링해주도록 바뀌었다

render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

만약 아래와같이 동적라우팅에서 경로가 겹친다면?
teams/new페이지에서는 구체적인 path를 따라 NewTeamForm가 렌더링된다.

<Route path="teams/:teamId" element={<Team />} /> // X
<Route path="teams/new" element={<NewTeamForm />} /> // O

Navigation

useNavigate를 사용.

• navigate(-1)은 뒤로가기
• navigate(1)은 앞로가기

import { useNavigate } from "react-router-dom";

const Fc = () => {
	let navigate = useNavigate();
    return(
    	...
        navigate(`teams/{pageId}`)
    )
}

params

useParams를 사용.

• 경로의 params값을 가져와서 데이터 fetch하는식으로 많이 사용
• 상품페이지마다 해당하는 상품의 정보를 가져올수있음

function Invoice() {
  let params = useParams();
  const data = axios.get(`/api/{params}`);
  return (
  	{data.map(data => { return (<div>{data}</div>)})}
  )
}

중첩 라우팅

아래의 App컴포넌트에서 Invoices안에 Invoice와 sent가 중첩라우팅되어있다
outlet은 중첩라우팅시 path에 따라서 중첩된 컴포넌트들이 불려오는 부분이다.

• /invoices : Invoices컴포넌트의 h1태그 + InvoicesList컴포넌트가 렌더링된다
• /invoices/123 : Invoices컴포넌트의 h1태그 + outlet에 <h1>Invoice 123</h1> 이 렌더링된다
• /invoices/sent : Invoices컴포넌트의 h1태그 + outlet에 Sent컴포넌트가 렌더링된다.

import { Routes, Route, Outlet } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
      	<Route index element={<InvoicesList />} >
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function InvoicesList(){
	return <div>invoice 디폴트 홈</div>
}

function Invoice() {
  let { invoiceId } = useParams();
  return <h1>Invoice {invoiceId}</h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

Not Found

path="*"은 모든 URL과 일치하지만 가장 약한 우선순위를 가져서 일치하는 다른 경로가 없는경우에 해당한다. 즉 경로가 틀린경우 NOT FOUND를 보여주기 적합하다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

Routes에서 다른 Routes를 가져올때

path의 끝부분에 *을 붙여서 가져올수있다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}