[react 리액트] Router 초간단 라우터 구현

1. VScode 터미널에서 router-dom 을 설치한다.

입력어: npm install react-router-dom

 

 

2. 라우터를 구현할 파일 내부에 필요한 컴포넌트 import

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

 

 

3. 사용 방법

1) 모든 UI는 BrowserRouter 로 감싼다.

- 구조: BrowserRouter > Routes > Route

    <BrowserRouter>

        <Routes>

          <Route />

          <Route />

        </Routes>

    </BrowserRouter>

*react-router-dom v6 부터 Switch 안씀. (v5까지는 Routes 역할을 Switch가 담당했었음)

 

 

2) UI 변화없이 동일하게 노출되는 영역은 <Routes> </Routes> 밖에 위치

3) UI 변경될 내용들은 <Routes> 안에 <Route>로 담음

4) 그리고 각 컴포넌트를 다음과 같이 담음 <Route path="/주소" element={<컴포넌트 />} /> 

import './App.css';

import Header from './component/Header';

import DayList from './component/DayList';

import Day from './component/Day';

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

import EmptyPage from './component/EmptyPage';

function App() {

  return (

    <BrowserRouter>

      <div className='App'>

        <Header />

        <Routes>

          <Route path="/" element={<DayList />}/>

          <Route path="/day/:day" element={<Day />}/>

          <Route path="/*" element={<EmptyPage />}/>

        </Routes>

    </div>

    </BrowserRouter>

  );

}

export default App;

 

📌 Route 에서 path 와 element 의 관계

1) path="/" (url/)일 때, DayList 컴포넌트를 불러오겠다 이기야

2) path="/day/:day" (url/day/day파라미터값) 일 때, Day 컴포넌트를 불러오겠다 이기야

3) path="/*" 위에 지정된 값 빼고 나머지 일 때, EmptyPage 컴포넌트를 불러오겠다 이기야

 

 

 

5) Route에서 path는 "이동할 주소"를 뜻함

- "/"는 첫 페이지를 뜻함. (내 사이트 url/ 와 동일)

- "/*"은 내가 지정하지 않은 다른 모든 잘못된 주소를 뜻하며 잘못 접속한 경우, 404화면 등 구현에 쓰임.

 

 

 

6) 클릭 시, 페이지 이동 기능을 구현하고 싶을 때,

- 리액트 Router 환경에서 링크는 a href="" 태그가 아닌 Link to="" 를 사용

- dom에서 Link 컴포넌트 import 해 온다.

- Link to="/원하는 주소" (url/원하는 주소) 와 같음

import { Link } from "react-router-dom"

export default function EmptyPage(){

    return (

        <>

        <h2>잘못된 접근입니다.</h2>

        <Link to="/">돌아가기</Link>

        </>

    )

}

- 이런 식으로 표현도 가능

 

<Link to={`/day/${day.day}`}>Day {day.day}</Link>