react route 2

저번 글에 이어서, 리액트 라우터의 몇가지 기능에 대해 좀더 적어봄.
정확하게는, 강의를 듣고 내용을 한번 더 정리하기 위한 글.

1. navigate

리액트 라우터의 함수.
Link태그 말고, 다른 방법으로 url 접속을 해줌.

쓰는 방법

1. useNavigate를 사용하여 navigate 변수 생성.
2. 버튼 등에 navigate 변수를 사용하여 이동기능 추가.
   이렇게 사용 가능.
   추가적으로, navigate("/경로")말고 1 넣으면 뒤로가기 / 2넣으면 앞으로가기 됨.

//App.js
  let navigate = useNavigate();
//상세페이지 가는 버튼 만들기.
  <Nav.Link
  onClick={() => {
    navigate("/detail");
  }}
    >
      상세페이지
  </Nav.Link>

nested routes

서브경로 만들때 사용됨.
/about/member 이런 경로들은 묶어놓는게 편함. 이럴 때 사용.

사용 방법

1. Route 태그를 연다.
2. 하위 Route들을 그 안에 넣어놓는다(경로에 /제외)
3. Outlet으로 하위 Route들이 어디에 나타날지 나타낸다.

//App.js
<Routes>
        <Route path="/event" element={<Event />}>
          <Route
            path="one"
            element={<div>첫 주문시 양배추즙 서비스</div>}
          ></Route>
          <Route path="two" element={<div>생일기념 쿠폰 받기</div>}></Route>
        </Route>
<Routes>
 
//Event.js
        const Event = (props) => {
          return (
            <div>
              <div>오늘의 이벤트</div>
              <Outlet></Outlet> //여기에 하위 Route의 html들이 나타남.
            </div>
          );
        };

        export default Event;

404

Route 경로 * 하면 지정해준 경로 제외 다른 경로들이 다 그쪽으로 감.

<Route path="*" element={<div>없는 페이지입니다.</div>}></Route>