react router 사용

사이트에서 어떤 링크 클릭하면 다른페이지 보여주고 이런걸 쌩 js나 html로 하면 그 url마다 새로운 html 파일을 만들고 이래야되는데

react는 single page application이라서 html파일이 딱 한개있음

그래서 컴포넌트로 다른 페이지 내용을 만들어놓고 접속하면 그 컴포넌트를 보여주면됨

 

이걸 도와주는 라이브러리가 react-router-dom. 라우팅을 도와줌

<Routes>

  <Route path='/a' element={}> // path 경로로 접속하면 element안의 내용을 보여줌

<Routes> 

페이지에 보여주고 싶은 내용을 컴포넌트로 만들어놓으면 편함

 

Link

a태그랑 비슷한건데 좀더 편하게 만들수 있음

<Link to='이동경로'></Link> // 해주면 a태그랑 똑같이 밑줄도 생기고 누르면 해당 주소로 이동함

 

이거보다 더 편한게 useNavigate()

let navigate = useNavigate()해주고 onClick{() => navigate('이동경로')}해주면 똑같은 효과

navigate(-1)해주면 뒤로가기 버튼이랑 똑같은 효과