frontendreact

React Router (Link)

, , , ,

React Router Dom

React Router Dom을 이용하여 링크를 변경하는 방법에 대해 포스팅하겠습니다.

사용방법

1
npm i react-router-dom

react-router-dom패키지를 설치합니다.

1
npm i react-router-dom @types/react-router-dom

typescript의 경우 위 두 개의 패키지를 설치해야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

index.ts에서 react-router-dom패키지의 BrowserRouter를 이용하여 App component를 감쌉니다. BrowserRouter를 이용하여 라우트 기능을 사용하기 때문에 추가하는 것 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {Link} from 'react-router-dom'
import React from 'react';

const App = () => {
  return (
    <div>
      <button><Link to='/'>home</Link></button>
      <button><Link to='/about'>about</Link></button>
      <button><Link to='/admin'>admin</Link></button>
    </div>
  );
};

export default App;

App.ts에서 위 코드와 같이 버튼으로 react-router-dom패키지의 Link함수를 이용합니다. <Link to='/link'>여기에서 to 다음의 경로가 http://localhost:3000/link과 같이 도메인의 다음 경로가 됩니다.

Link를 이용하여 간단하게 버튼을 만들어 보았는데 위처럼 링크는 변경이 됩니다. 하지만 이동된 페이지를 보여주려면 Route기능을 사용하면 됩니다.

공유하기