[React] React Router

1. 라우팅이란?

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 입니다.

리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 합니다.

2. 리액트 라우터

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공합니다.

이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter입니다.

1) 종류

 - BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 합니다.
- HashRouter 해시 주소(http://goddaehee.tistory.com/#test )를 감지 합니다.

3. 설치

1) install react router dom

npm install react-router-dom

2) <BrowserRouter>태그로 컴포넌트 사용하기

프로젝트 최상단인 index.tsx에서 BrowserRouter를 적용하여 자식 컴포넌트들이 아루팅 기능을 사용할 수 있도록 작성합니다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  <React.StrictMode>
    <BrowserRouter>{/* <- 작성 후 import  */}
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);

reportWebVitals();

3) <Routes>, <Route> 컴포넌트 사용하기

1. <Routes>여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 합니다.
2. <Route>
   path속성에 경로, element속성에는 컴포넌트를 넣어 줍니다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 됩니다.

   // App.tsx
   import { Route, Routes } from 'react-router-dom';
   import Index from './views/1219';

function App() {
return (

<div>
  <Routes>
    <Route path="/1219" element={<Index />} />
  </Routes>
</div>

);
}

export default App;

---
https://goddaehee.tistory.com/305