100224 til

React router dom 

 

어플리케이션에서 클라이언트 측 라우팅을 쉽구 해줄수 있도록 도와주는 라이브러리다 

 

리액트는 spa  기반 으로 특정 Url 경로에 맞춰 컴포넌트만 변경 하는 방식으로 동작 . 

 

리액트 라우터 돔은 spa 방식에서 여러경로 페이지 를 처리 하는 기능 을 제공 . 

 

 

설치 방법 

 

yarn add react-router-dom 

 

src 밑에 components filte page 로 만들기 

page 밑에 

Home.jsx 

About.jsx 

Works.jsx

Contact.jsx 

 

 

shared 파일 하나 더 만들어서 Router.jsx 도 만들어준다

 

 

 

 

라우터 router

url 감지 , url 에 맞는 컴포넌트를 렌더링 해줌 . 

browserrouter 사용 하여 라우팅 설정 할 수 있음 .

 

라우트 route

각 Url 경로에 따라 렌더링할 컴포넌트를 정의 하는 역할 

<Route path="/about" element={<About />} />

 

링크  link 

페이지간 이동할떄 , 새로고침 없이 라우팅 처리 를 도와줌 . a tag 대신 사용 .

<Link to="/about">About</Link>

 

라우츠 routes 

주어진 경로와 매칭되는 첫번쨰 route 컴포넌트를 렌더링 함 .

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

 

react-router-dom 에서 import 먼저 해주기 

 

 

<BrowserRouter>로 감싸기 

<BroswerRouter>안에 Routes 로 감싸기 

Routes 안에 Route로 감싸기

 

path; 사용자가 입력할 주소 

element 주소에 따라 보여줄 컴포넌트 

 

 

import {BrowserRouter ,Route , Routes} from "react-router-dom";

import Home from "../pages/Home";

import About from "../pages/About";

import Contact from "../pages/Contact";

import Works from "../pages/Works";

const Router = () => {

return (

 

<BrowserRouter>

<Routes>

{/* Route */}

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/contact" element={<Contact />} />

<Route path="/works" element={<Works />} />

</Routes>

</BrowserRouter>

);

};

export default Router;

 

 

 

useNavigate 

A=>B 로 이동하기 위한 리액트라우터돔 훅 

 

네비게이션 바를 눌렀을때 페이지가 이동하도록 

 

 

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 처리 후 홈 페이지로 이동
    navigate('/');
  };

  return <button onClick={handleLogin}>로그인</button>;
}

 

Link tag  = a tag 대신 쓴다 

 <Link to= "/hone">더보기<Link> 

 

a tag 안만들고 싶을 때 useNavigate 쓴다 

추가적인 코드를 작성하고싶을떄 . 

 

const navigate= useNavigate(); 

를 쓰면 된다.

 

dynamic router dom 

동적라우팅 

 

 

parameter 

https://shopping.naver.com/logistics/products/10779181469

[무찌 공동개발] NEW 지베르니 듀이 글래시 쿠션 13gX2 (본품+리필)(SPF 50+ PA+++)

뒤에 숫자 부분 /10779181469 가 상품의 url  아이디 이다 . 

주소 /상품id 

 

 

url parameter : +<이름>

<Route path=}/products/:id"

 

 

useParams 를 써서 url의 id 를 가져와야한다 

import useParmas from react-router-dom 

 

const params-= useParams();

 

id 를 이용해서 api 를 요청 하면댐 

useEffect 쓰기 
~.

 

Queryparameter 

?뒤에 키 =값 

&정령 필터링정보? 뒤에 작성 

 

?뒤에있는건 useSearchParams 로 가져옴 

usestate 랑 비슷하게 쓰면됨 

const [searchParams ,setSearchParams]=useSearchParams();

 

 

 

Outlet 

어디에 보여줄지 결정 한다