Spa2 원하는 페이지에서만 nav와 footer 라우팅 및 잘못된 경로는 404 페이지 라우팅하기 이번 홈페이지에서는 nav와 footer가 모든 화면에서 다 보여지고 있어서 다른 설정을 해주지 않아도 되었는데 404페이지를 만들자는 의견이 나오면서 라우팅을 손을 봐주어야했다. 404페이지 path 404페이지는 정해지지 않은 path를 입력하는 경우 무조건 떠야하기 때문에 아주 간단하게 path에 *를 입력해주면 된다. 근데 이렇게만 코드를 넣어주니 nav와 footer가 같이 보이거나 에러가 나는 상황이 생겼다. react-router-dom 의 outlet 그래서 알게 된 방법이 컴포넌트를 분리해 라우팅을 해주면 되는 것이었다. Layout이라는 컴포넌트 안에서 Nav와 Footer를 불러오고 그에 따라 달라져야하는 부분을 Outlet으로 처리해주었다. const Layout = () => { .. 2023. 7. 16. SPA로 구성된 React에서 Router 구현하기 리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다. MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다. 우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다. 이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다. [과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기 일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다. 당연히 export도 미리 해준다. import React from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import "./In.. 2023. 6. 15. 이전 1 다음
