React router 실습 도중 에러 해결

https://react.vlpt.us/react-router/01-concepts.html 

벨로퍼트 리액트 라우터 실습을 하면 라우터로 About , Home을 출력하게 하는 기본 코드가 나온다.

 

해당 App.jsx 코드는

 

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from './About'
import Home from './Home'

const App = () => {
  return (
    <div className="App">
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  )
}

export default App

전혀 출력 안됨 왤까?

 

벨로퍼트님의 실습과 다른점은 라우터 버전!!!!

 

찾아보니깐 라우터 6이상 부터는 문법이 좀 바뀌었음 그래서 에러뜨고 빈화면나오고 그러는 거임

 

그래서 이것저것 찾아본 결과 수정한 방법

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from './About'
import Home from './Home'

const App = () => {
  return (
    <div className="App">
      <Routes>
        <Route path="/" exact={true} element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  )
}

export default App

 

Routes로 감싸고 component => element로 수정하니깐 잘뜸

참고로 element쓸때 < />감싸야한다 없으면 안뜸

 

---

파라미터 : /profiles/hjy
쿼리 : /about?details=true

router 기본 사용법

// 링크이동
<Link to = "/"></Link>

// 라우터 지정
<Route path="경로지정" element={<컴포넌트이름 />} />

// 파라미터 지정
<Route path="/profiles/:username" element={<profiles />} />

아놔;;;;; 근데 또 에러가 난다. 파람을 참조못한다는

그래서 profiles.jsx에서 콘솔 찍어보니 언디파인드네????

또또 router 6이상은 다르지 이렇게 바꾸자

//기존 코드 부분

const Profile = ({ match }) => {
  // 파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조합니다.
  const { username } = match.params;
  const profile = profileData[username];
  
// 바꿔야 될부분
// 최상단 선언
import { useParams } from 'react-router-dom'

const Profile = () => {
  const { username } = useParams()
  const profile = profileData[username]

이러면 잘 출력되는 걸 볼수 있다 ㅇㅅㅇ

 

Query도 마찬가지 6이상 부터는 useSearchParams를 쓰자

import React from 'react'
import { useSearchParams } from 'react-router-dom'

const About = () => {
  const [searchParams] = useSearchParams()
  const detail = searchParams.get('detail') === 'true'

  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
      {detail && <p>추가적인 정보가 어쩌고 저쩌고..</p>}
    </div>
  )
}

export default About

 

벨로퍼트 실습 부분과 다르기 때문에 참고

---

이외에도 라우터 v6로 바뀐게 많으니깐 라우터부분은 벨로퍼트께 아닌 react-router-dom공문이나 다른 방법으로 찾아보는 걸 추천한다

권장이아니라 강요다 ㅇㅅㅇ

 

벨로퍼트 실습을 한다면서 왜 헷갈리게 최신 버전을 쓰냐고 물어본다면

프론트엔드는 기술이 빠르게 바뀌기 때문에 최신 버전을 쓰는거다

당장 1년 아니 6개월만 지나도 지금 내가 공부중인 이 문법 혹은 기술들이 구시대가 될 수 있어(헉)

 

Router부분은 vue랑 리액트랑 크게 다르지 않아서(물론 좀 깊게 들어가면 다르겠지???)

일단은 간단히 넘어갈 예정