# react-router

<div align="left"><figure><img src="/files/qhNAV3qVJWwwziQZNtdO" alt=""><figcaption></figcaption></figure></div>

## React router

React router는 Client-side에서 페이지 분할이 가능하도록 하는 기술이다.

{% embed url="<https://reactrouter.com/en/main>" %}

## 의존성 설치

의존성 설치는 [npm](/web/develop-page/js/webpack/nodejs.md)을 이용한다. 프로젝트 폴더에서 다음과 같이 작성한다.

```bash
npm install react-router react-router-dom
```

설치 후 **`package.json`** 파일에 다음과 같이 추가되어 있어야 한다.

<div align="left"><figure><img src="/files/MZsm68JG0W7CGvcMnSCy" alt=""><figcaption></figcaption></figure></div>

## Router 사용 설정

Router를 사용하기 위해 다음과 같이 <mark style="color:blue;">**`index.js`**</mark>에 설정한다.

```jsx
<BrowserRouter>
    <App/>
</BrowserRouter>
```

사용할 수 있는 Router는 두 가지가 있다.

* **BrowserRouter** - HTML5를 지원하는 브라우저의 주소 변화를 감지
* **HashRouter** - 해시(#) 주소 변화를 감지

사용하기 위해서는 다음과 같이 import를 해야 한다.

```jsx
import {BrowserRouter, HashRouter} from 'react-router-dom';
```

{% hint style="info" %}
Hash Router는 배포 환경에서 주소 매핑을 사용할 수 없을 경우 사용한다.
{% endhint %}

## Routing

Router를 원하는 컴포넌트에 다음과 같이 설정한다.

```jsx
<Routes>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
    <Route path='경로' element={태그}/>
</Routes>
```

사용을 위해서 다음과 같이 **import**를 해야 한다.

```jsx
import {Routes, Route} from 'react-router';
```

## 예시

{% code title="App.js" %}

```jsx
const App = ()=>{
  return (
    <>
      <MainHeader/>
      <Routes>
        <Route path='/' element={<MainContent/>}></Route>
        <Route path='/portfo lio' element={<PortfolioList/>}></Route>
        <Route path='/quiz' element={<QuizList/>}></Route>
        <Route path='/link' element={<LinkList/>}></Route>
        <Route path='/notice' element={<NoticeList/>}></Route>
        <Route path='/info' element={<DevelopInfo/>}></Route>
      </Routes>
      <MainFooter/>
    </>
  );
}

export default App;
```

{% endcode %}

## Router Link

Router 설정을 마쳤다면 Router로 이동할 수 있는 Link 설정을 해야 한다.

Router 이동 시 a 태그가 아닌 Link 태그로 설정해야 한다.

```jsx
<Link to="경로">내용</Link>
```

## useHistory

React Router 5.1.0 버전 이하, React 16.8 버전 이하인 경우 **useHistory hook**을 사용할 수 있다. 이를 이용하여 프로그래밍 적으로 라우터 이동이 가능하다.

```jsx
import {useHistory} from 'react-router-dom';

const CustomComponent = ()=>{
    const history = useHistory();
    
    const clickHandler = e=>{
        history.push("/");
    };
    
    return (
        <button onClick={clickHandler}>Home</button>
    );
};
```

## useNavigate

React Router 6 이상에서 사용 가능한 페이지 전환 명령이다.

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

const CustomComponent = ()=>{
    const navigate = useNavigate();
    
    const clickHandler = e=>{
        navigate("/");
    };
    
    return (
        <button onClick={clickHandler}>Home</button>
    );
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/reactjs/cra/react-router.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.