[React] Router

1. 정의

SPA(Single Page Application)의 특성을 가진 리액트에서 하나의 페이지로 지정한 url을 따라 데이터를 보여주게끔 하는 기능이다.

 

 

 

2. 사용

import React, { Component } from 'react'; 
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 사용자 정의 컴포넌트
import Sample from './Sample';
import Sub from './Sub'; 


const App = () => { 
    return ( 
        <div className='App'>
            {/* Routes를 통해 여러 라우터들을 관리한다 */}
            <Routes>
                {/* path로 경로를 설정하고 element로 해당 경로에서 보여줄 컴포넌트를 지정한다 */}
                <Route path="/sample" element={<Sample />}></Route>
                {/* 특정 값을 받아 지정된 페이지로 이동할 때 콜론(:) 기호를 사용한다 */}
                <Route path="/sub:id" element={<Sub />}></Route>
            </Route>
        </div> 
    ); 
} 

export default App;

또한 리액트에서 html의 a 태그와 같이 지정된 경로로 이동하는 경우 다음과 같이 사용한다

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


const Sample = () => { 
    return ( 
        <div>
            {/* Link의 to를 통해 지정된 링크로 이동한다 */}
            <Link to="/detail">상세페이지</Link>
        </div> 
    ); 
} 

export default Sample;

단, router는 SPA의 특성상 필요한 페이지로 이동을 하여도 새로고침이 되지 않는 현상이 생길 수 있으므로 useEffect와 같이 라이프 사이클을 이용한 기법들을 이용하여 재렌더링을 하게끔 유도할 수 있다.

[React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기