리액트 라우터는 리액트 애플리케이션에서 URL 경로에 따라 컴포넌트를 렌더링하는 데 사용되는 라이브러리입니다. 리액트 라우터를 사용하면 URL 변경에 따라 동적으로 페이지를 전환하고 다양한 페이지 구성을 만들 수 있습니다.
- URL 경로와 컴포넌트 연결: URL 경로에 따라 렌더링할 컴포넌트를 설정합니다.
- 페이지 전환: URL 변경 시 부드러운 페이지 전환 효과를 제공합니다.
- 네스티드 라우팅: 여러 페이지를 계층적으로 구성할 수 있는 기능입니다.
- 리다이렉트: 특정 URL 경로에 접근 시 다른 URL로 자동 이동하도록 설정합니다.
- URL 파라미터 추출: URL 경로에 포함된 파라미터를 추출하여 컴포넌트에 전달할 수 있습니다.
window.history.pushState(null, '', e.target.pathname); // 뒤로가기, 앞으로가기창 이력 기억하기
뒷부분 꺼내기
const handlePopState = e => {
setPath(e.destination.url.split(location.host)).pop();
//location host는 http://localhost:5173 이 값이다. 이 값을 기준으로 잘라내!
};
pop으로 앞부분은 도려내주면, 뒷부분 /home, /page1, /page2만 남는다
+
a태그는 최초에 다운받은 js 파일에서 요청해서 화면을 띄워주는 용도이다,
하지만 서버와 통신하면서 렌더링을 실행할 때에는 a태그를 사용할 수 없다!
최초 통신하고나면 (모든 js,css 파일 받기 완료 후) 어떤 컴포넌트가 렌더링 되어야하는지를
리엑트 라우터가 구현해주는 것이다!!
리액트라우트를 사용하자!
[routes.js]
import Layout from "@components/layout";
import ErrorPage from "@pages/ErrorPage";
import BoardDetail from "@pages/board/BoardDetail";
import BoardList from "@pages/board/BoardList";
import BoardNew from "@pages/board/BoardNew";
import ReplyList from "@pages/board/ReplyList";
import Login from "@pages/user/Login";
import Signup from "@pages/user/Signup";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
errorElement: <ErrorPage />,
element: <Layout />,
children: [
{
index: true,
element: <BoardList />
},
{
path: "boards",
element: <BoardList />
},
{
path: "boards/:_id",
element: <BoardDetail />,
children: [
{
index: true,
element: <ReplyList />
}
]
},
{
path: "boards/new",
element: <BoardNew />
},
{
path: "users/login",
element: <Login />
},
{
path: "users/signup",
element: <Signup />
}
]
},
]);
export default router;
해당하는 path 주소로 이동시킬 것이다
element : 해당하는 엘리먼트를
* 자식인 경우 children 밑에 배열로 만들 수 있고, 이를 app 에서 사용할 때에는 Outlet
[app.jsx]
<RouterProvider router={ router } />
위 코드를 사용해서 routes에서 반환한 라우터 사용을 해준다.
[index.jsx]
import Footer from '@components/layout/Footer'
import Header from '@components/layout/Header'
import { Outlet } from 'react-router-dom'
function Layout() {
return (
<div className="flex flex-col min-h-screen">
<Header />
<Outlet />
<Footer />
</div>
)
}
export default Layout
가장 부모 엘리먼트인 Layout Header와 Footer 그리고 children의 배열인 Outlet 컴포넌트를 불러온다.
lazt loading
컴포넌트를 하나의 파일로 js 파일로 만드는 것이 아니라
레이지 로딩으로 작성한 것들은 따로 파일로 작성하여 성능을 높인다.
최초 페이지는 최대한 가볍게 필요한 것만, (Home, Layout) 적용하면
필요할 때만 꺼내쓸 수 있게 된다.
적용예시
const Home = lazy(()=> import ('@pages/Home.jsx'));
const Layout = lazy(()=> import ('@components/Layout.jsx'));
suspense로 레이지로딩 적용된 컴포넌트를 감싼다.
import {Suspense} from "react";
function App() {
return (
<Suspense fallback = {<ReactCsspin />}>
<RouterProvider router={ router } />
</Suspense>
);
}
suspense는 내부 컴포넌트가 로딩되기 전 보여줄 fallback 컴포넌트를 지정할 수 있다 ~
build 작업 수행 시
서버는 주소에 해당하는 파일을 무조건 찾게 되므로,
리액트 라우터를 사용해서 코드를 짠 경우, 404에러를 준다.
1. npm run build (빌드)
2. npx serve dist -s
ㄴ 404 에러 대신 인덱스 페이지를 리턴해라