리액트 라우터 사용법

리액트 라우터 사용법

 

라우터란?

사용자가 페이지를 이동할때마다 새로운 html을 받아와 화면을 보여주는 방식이 아닌

html을 한번에 받아와 실행시켜 필요한 데이터만 받아와 브라우저 주소의 경로에 따라 페이지를 보여준다.

 

라우터 설치

npm add react-router-dom

 

라우터 사용법

<BrowserRouter> 로 감싸여 그 안에 이동할 주소들을 담아서 사용한다.

  <BrowserRouter>
    <Path />
  </BrowserRouter>

 

path

import React from 'react';
import {Route,Routes} from 'react-router-dom'
import TodoPage from '../page/TodoPage';
import Home from '../page/Home';
import AboutMe from '../page/AboutMe';
const Path = () => {
    const data={
        velopert:{
            name:'아리',
            description:"리액트"
        }
    }

    return (

        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/TodoPage" element={<TodoPage/>} />
            <Route path="/profiles/:username" element={<AboutMe data={data}/>} />
        </Routes>

    );
};

export default Path;

<Route path="주소" element={<컴포넌트 이름/>}/>

이렇게 작성하여 이동할 주소를 맵핑할수 있다.

 

 

주소 이동하는 방법

<Link to="/TodoPage">todo</Link>

Link 를 이용하여 위  path에 작성한 주소로 이동할수 있다.

 

url 파라미터 사용법

        <Routes>
            <Route path="/profiles/:username" element={<AboutMe data={data}/>} />
        </Routes>

path="/profiles/:username" 에서 :username 이부분이 url 파라미터로 사용하는 부분이다.

이주와 연결된 컴포넌트에서 

  import {useParams} from 'react-router-dom';  
    const params=useParams();

useParams 로 값을 받아올수 있다.

만잔 :username 에서 :아리 라고 주소를 입력하여 이동할경우

params에는 아리라는 값이 저장된다.

 

url 쿼리스트링 사용법

        <div>
            <Link to="/profiles/non?detail=1">존재하지 않는 사람</Link>
        </div>

?와 &로 를 이용하여 파라미터를 표현하는 방법으로

import React from 'react';
import {useLocation} from 'react-router-dom';


const AboutMe = () => {

    const location=useLocation();



    return (
        <div>
           
             <h2>쿼리스트링 : {location.search}</h2>
      

        </div>
    );
};

export default AboutMe;

이렇게 하면 화면에는 ?detail=1 라는 값이 나타난다.

이걸 이용하기 위해서는 원하는 값들을 파싱해줘야하는데 이를 편하게 해주는 기능이 있다.

useSearchParams 를 이용한 값 전달

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


const AboutMe = ({data}) => {
 
    const [serchParams,setSerchParams]=useSearchParams();
    const detail = serchParams.get("detail");
   
    return (
        <div>
           
          <h2>파라미터 : {detail}</h2>


        </div>
    );
};

export default AboutMe;

이렇게 하면 detail뒤의 값이 존재할때 바로 얻을수 있다.

state를 사용하여 원하는 값을 넘기는 방법

Link 사용예

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

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link 
        to="/profiles/non?detail=1"
        state={{ username: "john_doe", age: 25 }}
      >
        Go to About Page
      </Link>
    </div>
  );
};

export default Home;

useNavigate 사용예

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

const Home = () => {
  const navigate = useNavigate();

  const handleNavigation = () => {
    navigate('/profiles/non?detail=1', {
      state: { username: "jane_doe", age: 30 }
    });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleNavigation}>Go to About Page</button>
    </div>
  );
};

export default Home;

이렇게 주소를 이동할때 받는쪽에서 데이터를 읽는 방법은

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

const AboutMe = () => {
  const location = useLocation();
  const state = location.state || {};

  return (
    <div>
      <h1>About Me Page</h1>
      {state.username ? (
        <div>
          <h2>Username: {state.username}</h2>
          <h2>Age: {state.age}</h2>
        </div>
      ) : (
        <h2>No data provided</h2>
      )}
    </div>
  );
};

export default AboutMe;

 

이렇게 하여 읽을수 있다.

 

Navigate 컴포넌트 사용법

특정 조건을 만족시 특정 페이지로 이동시킬때 사용하는 방법이다.

import React from 'react';
import { Navigate } from 'react-router-dom';

const Example = () => {
  const isLoggedIn = false; // 로그인 여부 예시

  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  return <h1>Welcome to the Dashboard!</h1>;
};

export default Example;