[React] React Router - Link 동적 패스 지정

07.23.2023

1. 기본 Link 사용법

App.tsx에 먼저 패스 등록을 해줘야 한다.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Main from 'pages/Main';

function App(): JSX.Element {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

이 다음 해당 컴포넌트에서 이와 같은 코드를 써주면 된다.

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

function Example(): JSX.Element {
  return (
    <Link to="/"> Main </Link>
  );
}

export default Example;

 

2. 컴포넌트에 Link 적용하기

Link는 a태그로 렌더링된다.

만약 버튼을 가지고 있는 div를 눌렀을 때 Link가 동작하기를 원한다면 Link태그 안에 요소를 넣어주면 된다.

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

function Example(): JSX.Element {
  return (
    <Link to="/">
      <div>
        hi
        <button type="button"> click! </button>
      </div>
    </Link>
  );
}

export default Example;

 

3. 동적으로 Link의 path를 바꾸고 싶다면?

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

// path = '/'
function Example(path): JSX.Element {
  return (
    <Link to={path}>
      <div>
        hi
        <button type="button"> click! </button>
      </div>
    </Link>
  );
}

export default Example;

 

만약 이런 link를 10개를 만들고, 그 link가 각각 다른 아이디로 directed되어야 한다면 이런 코드를 쓸 수 있다.

 

먼저 App를 수정해주자.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Main from 'pages/Main';

function App(): JSX.Element {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/:id" element={<Main />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

유저의 id에 따라 Main컴포넌트를 다르게 화면에 띄울 수 있을 것이다.

 

다음은 컴포넌트를 보자.

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

// len = 5
// ids = [1, 2, 3, 4, 5]
function Example(len, ids): JSX.Element {
  
  const lists = Array.from({lenth: len}, (_, i) => (
    <Link to={`/${ids[i]}`} key={i}>
      <div>
        hi
        <button type="button"> click! </button>
      </div>
    </Link>
  );
  
  return <div> {lists} </div>;
}

export default Example;

key prop은 리액트가 list내에서 변경을 감지해 reconciliation할 때 list elements를 모두 업데이트 하는 대신 변경된 하나의 element만 변경할 수 있도록 돕기 때문에 가급적 써주는 것이 성능면에서 권장된다.

Array.from은 array와 비슷한 데이터형식의 변수들을 array로 얕은 복사 해준다. 자세한건 공식문서에서!