[React] React Router Dom APIs

HyeonE·2023년 1월 2일
0

React

목록 보기
11/12
post-thumbnail

저번 React Router Dom에 이어 React Router Dom APIs에 대하여 공부하기💻

1. 중첩 라우팅(Nested Routes)

  • 중첩 라우팅은 React Router의 가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지럽힐 필요가 없어집니다.
  • 대부분의 레이아웃은 URL의 세그먼트에 연결되머 React Router은 이를 완전히 수용합니다.
<BrowserRouter>
  	<Routes>
    		{/* App 컴포넌트에 Header, Footer 등 Layout */}
			<Route path="/" element={<App />}>
              {/* localhost:3000/ 경로 => Home 컴포넌트 */}
				<Route index element={<Home />} />
                  {/* localhost:3000/teams 경로 => Teams 컴포넌트가 Layout */}
                  <Route path="teams" element={<Teams />}>
                    	{/* localhost:3000/teams/13 경로 => Team 컴포넌트 */}
                  	<Route path=":teamId" element={<Team />} />
                  	<Route path="new" element={<NewTeamForm />} />
                      {/* localhost:3000/teams 경로 => LeagueStandings 컴포넌트 */}
					<Route index element={<LeagueStandings />} />
                	</Route>
            </Route>
  	</Routes>
</BrowserRouter>

2. Outlet

  • 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet을 사용해야 합니다.
  • Outlet을 사용하면 하위 경로가 렌더링될 때 UI가 표시될 수 있습니다.
  • 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링하지 않습니다.
funciton App() {
	return (
    	<div>
      		<h1>Hello World!</h1>
      			<nav>
      				<Link to="/">Home</Link>
      				<Link to="teams">Teams</Link>
      			</nav>
      			<div className="content">
      				<Outlet />
      			</div>
      	</div>
    );
}

3. useNavigate

  • 경로를 바꿔줍니다. ex) navigate('/home') => loaclhost:3000/home으로 갑니다.
import { useNavigate } from "react-router-dom";

funciton SignupForm() {
  let navigate = useNavigate();
  
  async function handleSubmit(e) {
  	e.preventDefault();
    await submitForm(e.target);
    navigate("../success", { replace: true });
  }
  
	return <form onSubmit={handleSubmit}>{*/ ... */}</form>;
}

4. useParams

  • :style 문법을 path 경로에 사용하였다면 useParams()로 읽을 수 있습니다.
    "아래 코드는 :invoiceId가 무엇인지 알기위해 useParams를 사용했습니다."
import { Routes, Route, useParams } from "react-router-dom";

function App() {
	return (
    	<Routes>
      		<Route 
      		  path="invoices/:invoiceId"
      		  element={<Inovice />}
      		/>
        </Routes>
    );
}

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

4. useLocation

  • 이 Hooks는 현재 위치 객체를 반환합니다.
  • 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용할 수 있습니다.
import * as React from 'react';
import { useLocation } from "react-router-dom";

function App() {
  	let location = useLocation();
  
  	React.useEffect(() =>{
    	ga('send', 'pageview');
    }, [location]);
  
	return (
    	// ...
    );
}

5. useRoutes

  • useRoutes Hooks는 'Routes'와 기능적으로 동일하지만 Route 요소 대신 JavaScript 객체를 사용하여 경로를 정의합니다.
  • 이러한 객체는 일반 Route 요소와 동일한 속성을 갖지만 JSX가 필요하지 않습니다.
import * as React from 'react';
import { useRoutes } from "react-router-dom";

function App() {
  let element = useRoutes([
    {
       path: "/",
       element: <Dashboard />,
       children: [
      	{
      	  path: "messages",
          element: <DashboardMessages />
    	},
    	{ path: "tasks", element: <DashboardTasks /> }
      ]
    },
     { path: "team", element: <AboutPage /> }
  ]);
    
	return element;
}
profile
프론트엔드 개발자가 되고싶은 대학생

0개의 댓글

관련 채용 정보