React router dom v6 (리액트 라우터 버전6)

React router dom v6 사용방법

1. yarn start react-router-dom@6 설치

2. index.js로 이동

   import { BrowserRouter } from 'react-router-dom'

   <BrowserRouter>
    <App /> 을 감싼다
   </BrowserRouter>

3. 폴더를 만든다
   ex) components, routes, pages ......
   components ->
   Posts ->index.jsx
   Users ->index.jsx

4. App.js로 이동

   import { Route, Routes, Link } from 'react-router-dom';

   <div className="App">
   <Link to="경로">경로이동</Link> //경로 클릭시 해당 경로로 이동
   <Routes>
    <Route path="경로" element={<연결된컴포넌트 />} />
    <Route path="*" element={<p>Not Found</p>} />
   </Routes>
   </div> 

   Routes의 역할: 주소변경 감지해 일치하는 Route를 보여줌
   *의 역할: 작성해둔 path와 일치하지 않는 모든 경우에 보여줄 element

nested router 사용방법

1. Route안에 Route작성

2. path에 변수이름 작성 ex)Id, pathId

   <div className="App">
   <Routes>
    <Route path="경로" element={<연결된컴포넌트 />}>
      <Route index element={<연결된컴포넌트 />} />
      {/* `path="경로"`로 들어간 후 기본적으로 보여줄 요소 */}
      <Route path:"변수이름" element={<연결된컴포넌트 />} />
    </Route>
   </Routes>
   </div> 

3. path="경로" 해당파일로 이동
   Outlet은 하위파일이 보일 위치를 설정해줌

   import { Outlet } from 'react-router-dom'

function 경로() {
  return (
    <div>
      경로
      <Outlet />
    </div> 
  )
}

4. Outlet안에 들어갈 컴포넌트로 이동

   import { useParams } from 'react-router-dom'

function 이름() {

  const params = useParams()

  return (
    <div>
      {/* `path="변수이름"`을 Id로 가정했을때 */}
      {params.Id}
    </div> 
  )
}

주소창에 입력한 주소가 {params.Id}부분에 표시됨

데이터를 받았을경우 예제

postData.js 내부구조
{
"userId": 1,
"id": 1,
"title": ''
"body": ''
}

import React from 'react'
import { Link } from 'react-router-dom'
import { postData } from '../../../constants/postData'
// export로 넘겼을 경우 {}해주기
// export default 넘겼을 경우 중괄호를 안해줘도됨

function PostIndex() {
  return (
    <div>{postData.map((post)=>{
      return(
      <Link to={`/posts/${post.id}`}><p>{post.title}</p></Link>
      )
    })}</div>
  )
}

export default PostIndex

import React from 'react'
import { useParams } from 'react-router-dom'
import { postData } from '../../../constants/postData'

function PostDetail() {

  const params = useParams()
  const post = postData.find((post)=>{return post.id === parseInt(params.postId)}) 
  //params.postId = String, post.id = Number이기때문에 결과가 표시안됨
  //해결방법: params.postId에 parseInt()해주기

  return (
    <>
    <p>{post.title}</p>
    <p>{post.body}</p>
    </>

  )
}

export default PostDetail