TIL-2024.05.02 - React - 008. Router (react-router-dom)

 

 

 

질문

1. React 에서 페이지 이동 하는 방식이 궁금해

 

Router (react-router-dom@v6)

- react-router-dom을 통해 Router 기능을 활용가능

- react-router-dom은 버젼 6까지 나왔음으로, 공식 문서에서 해당 기능 파악 필요. 

 

기본 예제

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />}>
          <Route path=":userId" element={<UserDetails />} />
        </Route>
      </Routes>
    </Router>
  );
}

 

 

 

Parameter 사용

- 라우트 경로에 파라미터를 전달하여 동적인 페이지를 렌더링

 

 

예제

 

... 생략 ...
	{/* Route Parameter > useParams Hook 을 사용해서 가져와야함. */}
	<Route path="profile/:username" element={<Profile/>}></Route>                
... 생략

 

import React from "react";
import NonUser from "./NonUser";
import {useParams} from "react-router-dom";


const data = {
    heath: {
        name: 'Heath Jann',
        description: 'React 초보'
    },
    gildong: {
        name: 'Gildong Hong',
        description: '홍길동'
    },
};
// react-router에서 useParams Hook을 통해서 parameter 가져옴
const Profile = (props) => {
    let { username } = useParams();
    const profile = data[username];
    if (!profile) {
        return <NonUser/>;
    }
    return (
        <div>
            <h3>{username}({profile?.name})</h3>
            <p>{profile?.description}</p>
        </div>
    );
};


export default Profile;

 

 

 

Query 사용 

- React Router v6에서는 useSearchParams 훅을 사용하여 쿼리 파라미터를 처리

 

 

예제

 

...생략...
	{/* Route URL 쿼리 > useSearchParams Hooks 을 사용해서 가져옴*/}
	<Route path="info" element={<Info/>}></Route>
...생략...

 

 

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

const Info = () => {
    // 직접적으로 location 프로퍼티에 접근하는 대신에, useSearchParams 훅을 사용하여 쿼리 파라미터에 접근해야함 (@react-router v6)
    const [searchParams] = useSearchParams();
    const query = searchParams.get('detail');

    return (
        <div>
            <h1>Info</h1>
            <p>Info of: {query}</p>
        </div>
    );
};

export default Info;

 

 

서브라우팅 

 

- 라우트 경로에 다른 라우트 사용 

 

예제

 

{/* 서브라우터 사용 */}
<Route path="about" >
	<Route index element={<About/>}></Route>
	<Route path="about-us" element={<AboutUs/>}></Route>
</Route>

 

 

 

네비게이팅 

- 프로그래밍 방식으로 라우팅을 수행하는 데 사용

 

예제

import React from "react";
import {useHistory, useNavigate} from 'react-router-dom'; // 설치한 패키지


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

    const goHome = () => {
        navigate('/');
    };

    const goBack = () => {
        navigate(-1); // Navigates back in history
    };

    const goForward = () => {
        navigate(1); // Navigates forward in history
    };

    const goToAboutPage = () => {
        navigate('/about');
    };

    return (
        <div>
            <h1>History Page</h1>
            <button onClick={goHome}>Go Home</button>
            <button onClick={goBack}>Go Back</button>
            <button onClick={goForward}>Go Forward</button>
            <button onClick={goToAboutPage}>Go to About Page</button>
        </div>
    );

}


export default HistorySample;

 

 

 

 

추가 확인해야되는 내용

https://reactrouter.com/en/6.23.0/start/tutorial

Tutorial v6.23.0 | React Router

 

 

 

 

답변

 

1. React 에서 페이지 이동 하는 방식이 궁금해

- Router (react-router-dom)을 통해 페이지 이동

- v6가 되면서 변화가 되어서, 공식 문서 확인 필요