Router

주석 필기 옮김 2

Router

react는 SPA라서 html파일을 하나밖에 사용을 안함 (index.html)

• 리액트 사용 안한 경우
  • html파일을 만들어서 상세페이지 내용을 채움
  • 누가 /detail로 접속하면 detail.html을 보여줌
    
    
• 리액트 사용한 경우 ☆

  • detail 컴포넌트를 만들어서 상세페이지 내용을 채움

  • 누가 /detail로 접속하면 기존 html을 싹 비우고 detail 컴포넌트를 보여줌
    (코드로 직접 짤 수도 있지만 길어지고 귀찮으니 일반적으로 react-router-dom이라는 라이브러리를 쓴다)

    ---

기본 사용법

페이지 구분하는 거를 routing이라고 함

<BrowserRouter>
  <App />
</BrowserRouter>

index.js에 가서 <App/>을 <BrowserRouter>컴포넌트로 감싸면 끝.

---

Routes, Route

<Routes>
	<Route path="/" element={<Home />} />
	<Route path="dashboard" element={<Dashboard />} />
</Routes>

Route`가 각각의 페이지!

그걸 Routes 로 묶어준다
path="경로"
이 Event 로 접속했을 때 보여줄 html을 element에 씀
메인페이지로 접속했을때 : path="/"

Router 장점
1. 뒤로가기 버튼 만들수있음
2. 페이지 이동이 쉬움 (UI 스위치 조작이 쉬움)

참고: 뒤로가기 관련
navigate(1) > 앞으로 한 페이지 이동해주세요
navigate(-1) > 뒤로 한 페이지 이동해주세요 (뒤로가기)

---

URL Parameter

<Route path="/detail/0" element={<Detail shoes={shoes} />} />
<Route path="/detail/1" element={<Detail shoes={shoes} />} />
<Route path="/detail/2" element={<Detail shoes={shoes} />} />

이렇게 쓰는 대신에 라우터적으로... URL 파라미터를 사용할 수 있음

<Route path="/detail/:id" element={} />

detail/아무거나asdfs 이렇게 쳤을때 > 이 페이지 보여주세요
이렇게하면 뭘치든간에 다 detail 페이지를 보여줌 > 상세페이지를 수백만개 만드는거

path="*" < 위에 만들어놓은 라우트 외에 모든것.

---

각각 다 다른내용을 보여주고 싶어요

props를 사용해도 되는데 Router 적으로 해결할 수도 있음 detail.js에서 {props.shoes[현재URL에입력한숫자].title} < 이렇게 들어가게 하면 되는거잖아

path="/detail/:id/sdfs/:sdfse" < 파라미터 이 뒤에 여러개 쓸수 있다. 그리고 파라미터랑 일반 문자랑 이렇게 섞어쓸수도 있다

<Route path="*" element={<div>없는페이지요</div>} />

---

Nested Route

/about
/about/member
/about/location

이런식으로... 만들고 싶을때

<Route path="/about" element={<About />} />
<Route path="/about/member" element={<About />} />
<Route path="/about/location" element={<About />} /> 

이렇게 각각 만들어도 되지만 nested route라는 걸 활용할 수도 있다.

<Route path="/about" element={<About />}>
  <Route path="member" element={<div>멤버임</div>} />
  <Route path="location" element={<div>위치정보임</div>} />
</Route>

부모로 감싸주고, path 에는 자식의 URL만

장점 > nested route 접속하면 element 2개가 다 보임

<Route path="/about" element={<About1 />}>
<Route path="member" element={<About2  />} /> 

이거 두개가 다 보인다

근데 nested route는 이 어바웃의 어디에 보여줄건지를 작성을 해줘야 보인다. 위애꺼 내부에 보여주기 때문에... (부모 안에다가 보여줌)

About 안에 작성

function About() {
  return (
    <div>
      <h4>회사정보</h4>
      <Outlet></Outlet> // 이렇게
    </div>
  );
}

아웃렛이라고 작성
nested route 안에 있는걸 보여줄 자리. 그 컴포넌트 안에 넣어놔야함

이거 언제씀?? > 여러 유사한 페이지가 필요할 때