React 라우터 navigate,nested routes,outlet

리액트 프로젝트 폴더구조

리액트는 html 이쁘게 만들어주는 라이브러리일뿐임

그래서 만들 파일들은 대부분 .js파일이기 때문에 비슷한 .js파일끼리 한 폴더에 묶어놓으면 그게 좋은 폴더구조임

컴포넌트 역할하는js파일은 components 폴더에 묶고

페이지 역할하는js파일은 routes 아니면 pages 폴더에 묶고

자주 쓰는 함수가 들어있는 js파일은 utils 폴더에 묶고

필요할때마다 폴더 만들어쓰는 습관 들여보자고

---

1. 페이지 이동기능을 만들고 싶으면 useNavigate() 씀

페이지 이동은 Link써도 된다했는데 이건 뭐임? Link 못생겼으면 이거 쓰면됨

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

useNavigate() 쓰면 그 자리에 유용한 함수 남음 - 페이지 이동시켜주는 함수임

navigate('/detail') 이런 코드가 실행되면 /detail 페이지로 이동 가능함

navigate(2) 이렇게 숫자 넣으면 앞으로가기,뒤로가기 기능개발도 가능

-1 넣으면 뒤로가기

2 넣으면 앞으로 2번 가기 뭐 이런느낌임

---

2. 404 페이지는

유저가 이상한 경로 접속했을때 잘못 됐다고 알려줘야할거 아님? 이런거 보여주고 싶으면

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

Route path="*" 하나 맨 밑에 만들어두면 됨

• 경로는 모든 경로를 뜻해서 이상한 페이지 접속시 원하는거 띄울 수 있는거임

---

3. 서브경로 만들 수 있는 nested routes

/about/member로 접속하면 회사멤버 소개하는 페이지

/about/location으로 접속하면 회사위치 소개하는 페이지 로 만들고 싶으면 어케함?

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

뭐 위처럼 코드 짜도 되겠지만

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

이렇게 만들어도 됨

Route 안에 Route를 넣을 수 있는데 이걸 Nested routes 라고 부름 이렇게 쓰면

/about/member로 접속시 멤버들 을 보여주고
/about/location으로 접속시 회사위치 보여줌

---

nested routes 했는데 div 안보이는데요?;

위처럼 코드짜면 /about/member로 접속시 About 안에 div를 보여줌

그래서 About 컴포넌트 안에 div를 어디다 보여줄지 표기해야됨

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>  <=== 표기
    </div>
  )
}

Outlet은 nested routes dksdml element들을 어디에 보여줄지 표기하는곳임