라우터

npm i react-router-dom

npm i react-router

 

일단 이거 2개.

dom은 말 그대로 document에 관한 거

 

사용법은,

먼저 라우터 관련은 다 BrowserRouter 라는걸로 감싸줘야 함.

 

뭐 어디에다 해야 한다 이런 규칙은 없고, 

그냥 라우터 관련은 다 , 그러니까 모든 라우터의 최상위면 됨.

Link 포함.

 

저 두 라이브러리의 컴포넌트들은 모두 감싸고 있어야 함.

<BrowserRouter>
    <Navigation></Navigation>
    <Routes>
      <Route path="/" element={<Home></Home>}></Route>
      <Route path="/product" element={<Product></Product>}></Route>
      <Route path="/about" element={<About></About>}></Route>
    </Routes>
</BrowserRouter>

 

이게 새로고침 하는 게 맞음.

근데 바뀐부분만 새로고침 하는거임. (바뀔 때 마다 Network에서 파비콘 새로 로드하는거 보면 새로고침 맞는 듯)

 

이제 지정하는 방법은,

<Routes>
  <Route path="/" element={<Home></Home>}></Route>
  <Route path="/product" element={<Product></Product>}></Route>
  <Route path="/about" element={<About></About>}></Route>
</Routes>

이렇게.

Routes로 감싸고,

Route로 개개별 지정해 주면 됨.

<Route path="url" element={저 url시 보여줄 컴포넌트}></Route>

 

그럼 저게 카드 레이아웃? 같은 느낌이라고 보면 됨.

저 path에 따라 지정해서 보여줌.

매치되는게 없으면 안보여줌.

 

이제 Navigator 부분 보면,

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to={"/"}>Home</Link></li>
        <li><Link to={"/product"}>Product</Link></li>
        <li><Link to={"/about"}>About</Link></li>
      </ul>
    </nav>
  );
}

<li><Link to={보내버릴url}>그냥내용</Link></li>

 

이것도 BrowserRouter 로 감싸야 함. react-router-dom 혹은 react-router의 컴포넌트이니.

 

 

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navigation goto="/">child</Navigation>
        <Routes>
          <Route path="/" element={<Home></Home>}></Route>
          <Route path="/product" element={<Product></Product>}></Route>
          <Route path="/about" element={<About></About>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

function Navigation() {
  return (
    <nav>
      <ul>
      	 <li><Link to={"/"}></Link></li>
         <li><Link to={"/product"}>Product</Link></li>
         <li><Link to={"/about"}>About</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

 

 

 

이거 관련 기능이,

 

import { Link, useMatch, useResolvedPath } from "react-router-dom";

const Linklist = ({ goto, children }) => {
  const resolvePath = useResolvedPath(goto);
  const isActive = useMatch({
    path: resolvePath.pathname,
    end: true,
  });

 

useMatch, useResolvedPath

 

이거 2개인데,

useMatch는 현재 내 url이랑 뭐 비교시켜보는..

저 path에 url을 넘기는데, 그것과 같으면 저 객체가 나오는 거고, 같지 않으면 그냥 null을 넘김.

저기 end는, 경로 패턴의 끝 부분만 검사할 지 여부임. 그러니까 뭐 예를 들면 localhost:8080/~~~면 저 /~~~ 이부분만 검사한다는 뜻인듯?

 

useResolvedPath는 저기에 url을 넣으면 그걸 구분해서 보여주는..?

{pathname: '/', search: '', hash: ''}

콘솔로 찍어보면 이렇게 넣은 url을 객체형식으로 구분해줌. 말 그대로 평소애 있는 그 resolver? 알아서 맞춰주는. 그런거임.

 

 

 

경로변수 이용 가능

<Route path='/profile/:username' element={<Profile/>}/>

import { useParams } from 'react-router';

const data = {
  velopert : {
    name:'김병만',
    description:'개그콘서트 달인 코너 출연자'
  },
  gildong:{
    name:'홍길동',
    description: '고전 소설 홍길동전 주인공'
  }
}

const Profile = () => {
  const params = useParams();
  const profile = data[params.username];

  return (
    <div className='Profile'>
      <h1>Profile</h1>
      {profile? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>
          존재하지 않는 프로필 입니다.
        </p>
        
      )
      }
    </div>
  )
}

export default Profile;

저 경로변수는, react-router의 useParams를 통해 가져오면 된다.

저기에 알아서 들어가 진다.

params.경로변수명. 이번에는 Router에 :username으로 줬기 때문에 params.username으로 해야 함.

 

 

 

이렇게 '경로'변수 말고, ?param=value 형식의 쿼리 스트링 가져오는 법

 

pathname : 현재 주소의 경로 (쿼리스트링 제외)

import React from 'react'
import {Link, useLocation} from 'react-router-dom'

const About = () => {
  const location = useLocation();
  return (
    <div className='About'>
      <h1>About...</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트</p>
      <p>쿼리스트링 : {location.search}</p>
      <Link to={'/'}>Home</Link>
    </div>
  )
}

export default About

 

useLocation()에는 여러가지가 있는데,

먼저 저기에 쓴 search 프로퍼티가 ?를 포함한 쿼리스트링 일체의 문자열임.

 

pathname : 경로명

hash : 주소의 # 문자열 뒤의 값 (옛날거임)

state : 페이지로 이동할 때 임의로 넣을 수 있는 상태값. 뭐 200 그런 거 인듯?

key : location 객체의 고유값. 초기에는 default인데, 페이지가 변경될 때 마다 고유값이 생성됨.

 

근데 저거 안쓸거.

 

더 쉽게 제공해 주는 게 있음.

useSearchParams임.

import {Link, useSearchParams} from 'react-router-dom'

const About = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const detail = searchParams.get('detail');
  const mode = searchParams.get('mode');

  return (
    <div className='About'>
      <h1>About...</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트</p>
      <p>detail : {detail}</p>
      <p>mode : {mode}</p>
      <Link to={'/'}>Home</Link>
    </div>
  )
}

export default About

저렇게 마치 useState처럼 받음. 

setSearchParams가 왜 있을까 생각을 했는데, 예를 들어 로그인 검증이 필요한 페이지의 경우, 로그인 안내 페이지로 리다이렉트 시키기 전에 그 경로를 쿼리 파라미터로 저장해 놓음.

 

여튼, 얻어오는 건 

searchParams.get(파라미터명)

하면 됨.