반드시 공식 문서를 읽어보실 것을 권장드립니다!
공식문서 보기
Switch가 Routes로 변경되었다.
Components를 불러오는 방식도 변경되었는데, 에로우 펑션을 활용해 컴포넌트를 전달하던 방식에서 element로 바로 component를 전달한다.
// v5까지의 방식
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={() => <Home />} />
<Route exact path="/write" component={() => <Write />} />
<Route component={() => <div>Page Not Found</div>} />
</Switch>
</BrowserRouter>
);
}
// v6방식
const Router = () => {
return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/page1/*" element={<Page1 />} />
<Route path="/page2/*" element={<Page2 />} />
<Route path="/*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
};
App.js에서 중첩 라우터를 사용하고, 중첩 라우터에서 Outlet 컴포넌트를 사용가능하다.
App.js에서 자식 태그로 중첩하는 라우터를 기재하고, Web.js에서 Outlet 라이브러리를 통해 가져온다.
// App.js
const App = () => {
return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/page1/*" element={<Page1 />} />
<Route path="/page2/*" element={<Page2 />} />
<Route path="/*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
};
// Web.js
import { Link, Routes, Route, Outlet } from "react-router-dom";
const Web = () => {
return (
<div>
<h1>This is Web</h1>
<ul>
<li>
<Link to="1">Post #1</Link>
</li>
<li>
<Link to="2">Post #2</Link>
</li>
<li>
<Link to="3">Post #3</Link>
</li>
<li>
<Link to="4">Post #4</Link>
</li>
</ul>
<Outlet />
</div>
);
};
export default Web;
pathname을 가져와 styled-components와 결합하기
import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";
const HeaderWrapper = styled("header")`
margin-bottom: 30px;
`;
const List = styled("ul")`
display: flex;
`;
const Item = styled("li")`
margin-right: 20px;
text-transform: uppercase;
font-weight: 600;
color: ${(props) => (props.selected ? "white" : "black")};
background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;
const Header = () => {
const { pathname } = useLocation();
return (
<HeaderWrapper>
{/* header 태그 */}
<List>
{/* ul 태그 */}
<Item selected={pathname.startsWith("/web")}>
{/* li 태그 */}
<Link to="/web">Go to Web</Link>
</Item>
<Item selected={pathname === "/design"}>
<Link to="/design">Go to Design</Link>
</Item>
<Item selected={pathname === "/server"}>
<Link to="/server">Go to Server</Link>
</Item>
</List>
</HeaderWrapper>
);
};
export default Header;
child의 child까지 자식 컴포넌트들을 랜더링하기 위해
react-router-config를 별도로 설치해 사용했다면 이제는 useRoutes Hook을 사용해 구성할 수 있다.
function App() {
let element = useRoutes([
// Route에서 사용하는 props의 요소들과 동일
{ path: "/", element: <Home /> },
{ path: "dashboard", element: <Dashboard /> },
{
path: "invoices",
element: <Invoices />,
// 중첩 라우트의 경우도 Route에서와 같이 children이라는 property를 사용
children: [
{ path: ":id", element: <Invoice /> },
{ path: "sent", element: <SentInvoices /> }
]
},
// NotFound 페이지는 다음과 같이 구현할 수 있음
{ path: "*", element: <NotFound /> }
]);
// element를 return함으로써 적절한 계층으로 구성된 element가 렌더링 될 수 있도록 함
return element;
}
< Routes>는 useRoutes를 감싼 wrapper라고 공식문서라고 언급하는데, 공식문에서는 이 둘 모두를 권장한다.
v6부터는 navigate라는 명칠을 사용한다. history.push와 history.replace 모두 navigate라는 명칭으로 사용한다.
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
[react-router-dom v6 (Upgrading from v5)
출처: https://snupi.tistory.com/174 [SNUPI]