[React] React-router-dom

1. React-router-dom

1) react-router-dom 설치 : yarn add react-router-dom;

📁shared 👉 Router.js 생성
📁 pages 👉 Home.jsx, LetterDetail.jsx 생성

2) Router.js에서 라우터를 설정하는 코드를 작성한다.

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

const Router = () => {
  return (
    <BrowerRouter>
      <Routes>
    //이 안에 라우트를 넣음. 
       <Route path = "/" element = {<Home />} />
	  <Route path = "/detail" element = {<Detail />} />
       </Routes>
    </BrowerRouter>
    )
}
export default Router;

• Route 컴포넌트에서 path 속성은 경로를, element는 보여줄 컴포넌트를 지칭한다.

3) App.js나 index.js에서 export한 router를 import한다.
(react-rotuer-dom에서 제공하는 Router가 아님을 유의하자!)

import Router from '../shared/Router';

function App() {
  return (
    <Router/>;
  )
}

➡️ 최상위 경로에서는 Home 컴포넌트를, '/detail' 경로로 이동하면 Detail 컴포넌트를 보여준다.

1.1 Outlet 활용

만약 Navbar와 같이 상위에 고정하고 원하는 부분만 화면을 업데이트하고 싶을 때 Outlet을 이용한다.

아울렛을 지정하면 원하는 자식 루트들을 아울렛 안에 표기할 수 있다.

Router.js

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

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<App />}>
                    <Route path='' element={<Home />} />
                    <Route path='detail' element={<LetterDetail />} />
                </Route>
            </Routes>
        </BrowserRouter>
    )
}

export default Router;

• 홈 경로('/')를 나타내는 Route 태그 안에 자식 요소로
  Home 컴포넌트와 Detail 컴포넌트를 추가한다.
• 이미 부모 Route가 '/' 을 포함하고 있기 때문에 detail만 입력해도 /detail 경로로 인식한다.

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

function App() {
  return (
    <div className='App'>
      <Banner />
      <Outlet />
    </div>
  );
}

export default App;

➡️ 상단에 Banner 컴포넌트는 상단에 유지되며,
Outlet을 통해 중첩된 하위 컴포넌트(Home,Detail)을 보여줄수 있다.