1
$ yarn create react-app router-tutorial # 연습용 폴더
2
$ cd router-tutorial
3

4
$ yarn add react-router-dom # React Router 설치

1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
import App from './App'
4
import { BrowserRouter } from 'react-router-dom' // 추가
5

6
const root = ReactDOM.createRoot(document.getElementById('root'))
7
root.render(
8
  <BrowserRouter>
9
    <App />
10
  </BrowserRouter>,
11
)

1
// src/pages/Home.js
2
export default function Home() {
3
  return (
4
    <div>
5
      <h1>홈</h1>
6
      <p>가장 먼저 보여지는 페이지입니다.</p>
7
    </div>
8
  )
9
}

1
// src/pages/About.js
2
export default function About() {
3
  return (
4
    <div>
5
      <h1>소개</h1>
6
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
7
    </div>
8
  )
9
}

1
import { Route, Routes } from 'react-router-dom'
2
import About from './pages/About'
3
import Home from './pages/Home'
4

5
export default function App() {
6
  return (
7
    <Routes>
8
      <Route path="/" element={<Home />} />
9
      <Route path="/about" element={<About />} />
10
    </Routes>
11
  )
12
}

1
// src/pages/Home.js
2
import { Link } from 'react-router-dom'
3

4
export default function Home() {
5
  return (
6
    <div>
7
      <h1>홈</h1>
8
      <p>가장 먼저 보여지는 페이지입니다.</p>
9
      <Link to="/about">소개</Link>
10
    </div>
11
  )
12
}

1
// src/pages/Profile.js
2
import { useParams } from 'react-router-dom'
3

4
const data = {
5
  velopert: {
6
    name: '김민준',
7
    description: '리액트를 좋아하는 개발자',
8
  },
9
  gildong: {
10
    name: '홍길동',
11
    description: '고전 소설 홍길동전의 주인공',
12
  },
13
}
14

15
export default function Profile() {
16
  // URL 파라미터의 이름은 라우트 설정을 할 때 Route 컴포넌트의 path props를 통하여 설정
17
  const params = useParams() // useParams Hook을 사용하여 객체 형태로 조회 가능
18
  const profile = data[params.username] // username URL 파라미터를 통하여 프로필을 조회
19

20
  return (
21
    <div>
22
      <h1>사용자 프로필</h1>
23
      {profile ? (
24
        <div>
25
          <h2>{profile.name}</h2>
26
          <p>{profile.description}</p>
27
        </div>
28
      ) : (
29
        <p>존재하지 않는 프로필입니다.</p>
30
      )}
31
    </div>
32
  )
33
}

1
// src/App.js
2
import { Route, Routes } from 'react-router-dom'
3
import About from './pages/About'
4
import Home from './pages/Home'
5
import Profile from './pages/Profile'
6

7
export default function App() {
8
  return (
9
    <Routes>
10
      <Route path="/" element={<Home />} />
11
      <Route path="/about" element={<About />} />
12
      {/* URL 파라미터는 /profiles/:username 과 같이 경로에 : 를 사용하여 설정 */}
13
      {/* 만약 URL 파라미터가 여러개인 경우엔 /profiles/:username/:field 와 같은 형태로 설정 가능 */}
14
      <Route path="/profiles/:username" element={<Profile />} />
15
    </Routes>
16
  )
17
}

1
// src/pages/Home.js
2
import { Link } from 'react-router-dom'
3

4
export default function Home() {
5
  return (
6
    <div>
7
      <h1>홈</h1>
8
      <p>가장 먼저 보여지는 페이지입니다.</p>
9
      <ul>
10
        <li>
11
          <Link to="/about">소개</Link>
12
        </li>
13
        <li>
14
          <Link to="/profiles/velopert">velopert의 프로필</Link>
15
        </li>
16
        <li>
17
          <Link to="/profiles/gildong">gildong의 프로필</Link>
18
        </li>
19
        <li>
20
          <Link to="/profiles/void">존재하지 않는 프로필</Link>
21
        </li>
22
      </ul>
23
    </div>
24
  )
25
}

1
// src/pages/About.js
2
import { useLocation } from 'react-router-dom'
3

4
export default function About() {
5
  // useLocation() : location 객체를 반환
6
  // - location 객체는 현재 사용자가 보고있는 페이지의 정보를 지닌 Hook
7
  const location = useLocation()
8

9
  return (
10
    <div>
11
      <h1>소개</h1>
12
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
13
      <p>쿼리스트링: {location.search}</p>
14
    </div>
15
  )
16
}

1
// src/pages/About.js
2
import { useSearchParams } from 'react-router-dom'
3

4
export default function About() {
5
  const [searchParams, setSearchParams] = useSearchParams() // 쿼리스트링을 파싱해주는 Hook
6
  const detail = searchParams.get('detail') // get() : 특정 쿼리 파라미터를 조회
7
  const mode = searchParams.get('mode')
8

9
  const onToggleDetail = () => {
10
    // detail 쿼리 파라미터의 값이 true이면
11
    setSearchParams({ mode, detail: detail === 'true' ? false : true })
12
  }
13

14
  const onIncreaseMode = () => {
15
    // mode 쿼리 파라미터의 값이 null이면
16
    const nextMode = mode === null ? 1 : parseInt(mode) + 1
17
    setSearchParams({ mode: nextMode, detail })
18
  }
19

20
  return (
21
    <div>
22
      <h1>소개</h1>
23
      <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
24
      <p>detail: {detail}</p>
25
      <p>mode: {mode}</p>
26
      <button onClick={onToggleDetail}>Toggle detail</button>
27
      <button onClick={onIncreaseMode}>mode + 1</button>
28
    </div>
29
  )
30
}

1
// src/pages/Articles.js
2
import { Link } from 'react-router-dom'
3

4
export default function Articles() {
5
  return (
6
    <ul>
7
      <li>
8
        <Link to="/articles/1">게시글 1</Link>
9
      </li>
10
      <li>
11
        <Link to="/articles/2">게시글 2</Link>
12
      </li>
13
      <li>
14
        <Link to="/articles/3">게시글 3</Link>
15
      </li>
16
    </ul>
17
  )
18
}

1
// src/pages/Article.js
2
import { useParams } from 'react-router-dom'
3

4
export default function Article() {
5
  const { id } = useParams()
6
  return (
7
    <div>
8
      <h2>게시글 {id}</h2>
9
    </div>
10
  )
11
}

1
import { Route, Routes } from 'react-router-dom'
2
import About from './pages/About'
3
import Article from './pages/Article'
4
import Articles from './pages/Articles'
5
import Home from './pages/Home'
6
import Profile from './pages/Profile'
7

8
export default function App() {
9
  return (
10
    <Routes>
11
      <Route path="/" element={<Home />} />
12
      <Route path="/about" element={<About />} />
13
      <Route path="/profiles/:username" element={<Profile />} />
14
      <Route path="/articles" element={<Articles />} />
15
      <Route path="/articles/:id" element={<Article />} />
16
    </Routes>
17
  )
18
}

1
// src/pages/Home.js
2
import { Link } from 'react-router-dom'
3

4
export default function Home() {
5
  return (
6
    <div>
7
      <h1>홈</h1>
8
      <p>가장 먼저 보여지는 페이지입니다.</p>
9
      <ul>
10
        생략...
11
        <li>
12
          <Link to="/articles">게시글 목록</Link>
13
        </li>
14
      </ul>
15
    </div>
16
  )
17
}

1
<div>
2
  <h2>게시글 {id}</h2>
3
  <ArticleList />
4
</div>

1
import { Route, Routes } from 'react-router-dom'
2
import About from './pages/About'
3
import Article from './pages/Article'
4
import Articles from './pages/Articles'
5
import Home from './pages/Home'
6
import Profile from './pages/Profile'
7

8
export default function App() {
9
  return (
10
    <Routes>
11
      <Route path="/" element={<Home />} />
12
      <Route path="/about" element={<About />} />
13
      <Route path="/profiles/:username" element={<Profile />} />
14
      <Route path="/articles" element={<Articles />} />
15
      <Route path="/articles" element={<Articles />}>
16
        <Route path=":id" element={<Article />} />
17
      </Route>
18
    </Routes>
19
  )
20
}

1
// src/pages/Articles.js
2
import { Link, Outlet } from 'react-router-dom'
3

4
export default function Articles() {
5
  return (
6
    <div>
7
      {/* Outlet 컴포넌트가 사용된 자리에 중첩된 라우트가 보여짐 */}
8
      <Outlet />
9
      <ul>
10
        <li>
11
          <Link to="/articles/1">게시글 1</Link>
12
        </li>
13
        <li>
14
          <Link to="/articles/2">게시글 2</Link>
15
        </li>
16
        <li>
17
          <Link to="/articles/3">게시글 3</Link>
18
        </li>
19
      </ul>
20
    </div>
21
  )
22
}

1
// src/Layout.js
2
import { Outlet } from 'react-router-dom'
3

4
export default function Layout() {
5
  return (
6
    <div>
7
      <header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>Header</header>
8
      <main>
9
        <Outlet />
10
      </main>
11
    </div>
12
  )
13
}

1
import { Route, Routes } from 'react-router-dom'
2
import Layout from './Layout'
3
import About from './pages/About'
4
import Article from './pages/Article'
5
import Articles from './pages/Articles'
6
import Home from './pages/Home'
7
import Profile from './pages/Profile'
8

9
export default function App() {
10
  return (
11
    <Routes>
12
      <Route element={<Layout />}>
13
        <Route path="/" element={<Home />} />
14
        <Route path="/about" element={<About />} />
15
        <Route path="/profiles/:username" element={<Profile />} />
16
      </Route>
17
      <Route path="/articles" element={<Articles />}>
18
        <Route path=":id" element={<Article />} />
19
      </Route>
20
    </Routes>
21
  )
22
}

1
export default function App() {
2
  return (
3
    <Routes>
4
      <Route element={<Layout />}>
5
        {/* path="/"를 index로 수정 */}
6
        <Route index element={<Home />} />
7
        <Route path="/about" element={<About />} />
8
        <Route path="/profiles/:username" element={<Profile />} />
9
      </Route>
10
      <Route path="/articles" element={<Articles />}>
11
        <Route path=":id" element={<Article />} />
12
      </Route>
13
    </Routes>
14
  )
15
}

1
// src/Layout.js
2
import { Outlet, useNavigate } from 'react-router-dom'
3

4
export default function Layout() {
5
  // navigate 파라미터가 숫자 타입이라면 앞으로 가거나, 뒤로 감
6
  // navigate(-1) 을 하면 한 번 뒤로가고 navigate(-2) 를 하면 두 번 뒤로 감
7
  // 반대로 navigate(1) 을 하면 앞으로 한 번 감 (단, 뒤로가기를 1번한 상태여야 함)
8
  const navigate = useNavigate()
9

10
  const goBack = () => {
11
    // 이전 페이지로 이동
12
    navigate(-1)
13
  }
14

15
  // 다른 페이지로 이동을 할 때 replace 라는 옵션이 존재
16
  // replace 옵션을 사용하면, 페이지를 이동할 때 현재 페이지를 페이지 기록에 남기지 않음
17
  const goArticles = () => {
18
    // articles 경로로 이동
19
    navigate('/articles')
20
  }
21

22
  return (
23
    <div>
24
      <header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>
25
        <button onClick={goBack}>뒤로가기</button>
26
        <button onClick={goArticles}>게시글 목록</button>
27
      </header>
28
      <main>
29
        <Outlet />
30
      </main>
31
    </div>
32
  )
33
}

1
const goArticles = () => {
2
  navigate('/articles', { replace: true })
3
}

1
<NavLink style={({isActive}) => isActive ? activeStyle : undefined} />
2
<NavLink className={({isActive}) => isActive ? 'active' : undefined} />

1
// src/pages/Articles.js
2
import { NavLink, Outlet } from 'react-router-dom'
3

4
export default function Articles() {
5
  const activeStyle = {
6
    color: 'green',
7
    fontSize: 21,
8
  }
9

10
  return (
11
    <div>
12
      <Outlet />
13
      <ul>
14
        <li>
15
          <NavLink to="/articles/1" style={({ isActive }) => (isActive ? activeStyle : undefined)}>
16
            게시글 1
17
          </NavLink>
18
        </li>
19
        <li>
20
          <NavLink to="/articles/2" style={({ isActive }) => (isActive ? activeStyle : undefined)}>
21
            게시글 2
22
          </NavLink>
23
        </li>
24
        <li>
25
          <NavLink to="/articles/3" style={({ isActive }) => (isActive ? activeStyle : undefined)}>
26
            게시글 3
27
          </NavLink>
28
        </li>
29
      </ul>
30
    </div>
31
  )
32
}

1
// src/pages/Articles.js
2
import { NavLink, Outlet } from 'react-router-dom'
3

4
export default function Articles() {
5
  return (
6
    <div>
7
      <Outlet />
8
      <ul>
9
        <ArticleItem id={1} />
10
        <ArticleItem id={2} />
11
        <ArticleItem id={3} />
12
      </ul>
13
    </div>
14
  )
15
}
16

17
const ArticleItem = ({ id }) => {
18
  const activeStyle = {
19
    color: 'green',
20
    fontSize: 21,
21
  }
22
  return (
23
    <li>
24
      <NavLink to={`/articles/${id}`} style={({ isActive }) => (isActive ? activeStyle : undefined)}>
25
        게시글 {id}
26
      </NavLink>
27
    </li>
28
  )
29
}

1
// src/pages/NotFound.js
2
export default function NotFound() {
3
  return (
4
    <div
5
      style={{
6
        display: 'flex',
7
        alignItems: 'center',
8
        justifyContent: 'center',
9
        fontSize: 64,
10
        position: 'absolute',
11
        width: '100%',
12
        height: '100%',
13
      }}
14
    >
15
      404
16
    </div>
17
  )
18
}

1
import { Route, Routes } from 'react-router-dom'
2
import Layout from './Layout'
3
import About from './pages/About'
4
import Article from './pages/Article'
5
import Articles from './pages/Articles'
6
import Home from './pages/Home'
7
import NotFound from './pages/NotFound'
8
import Profile from './pages/Profile'
9

10
export default function App() {
11
  return (
12
    <Routes>
13
      <Route element={<Layout />}>
14
        <Route index element={<Home />} />
15
        <Route path="/about" element={<About />} />
16
        <Route path="/profiles/:username" element={<Profile />} />
17
      </Route>
18
      <Route path="/articles" element={<Articles />}>
19
        <Route path=":id" element={<Article />} />
20
      </Route>
21
      {/* * 는 wildcard 문자로 아무 텍스트나 매칭한다는 뜻 */}
22
      {/* path="*"는 위에서 정의한 경로 외 모든 상황에 렌더링됨 */}
23
      <Route path="*" element={<NotFound />} />
24
    </Routes>
25
  )
26
}

1
// src/pages/Login.js
2
export default function Login() {
3
  return <div>로그인 페이지</div>
4
}

1
// src/pages/MyPage.js
2
import { Navigate } from 'react-router-dom'
3

4
export default function MyPage() {
5
  // 🍊 isLoggedIn 값이 로그인 상태에 따라 true 또는 false를 가르킨다고 가정
6
  const isLoggedIn = false
7

8
  // isLoggedIn이 false라면 Navigate 컴포넌트를 통해 /login 경로로 이동
9
  // - replace props는 useNavigate 에서 설명한 것과 동일함
10
  // - 페이지를 이동할 때 현재 페이지를 기록에 남기지 않기 때문에,
11
  // - 이동 후 뒤로가기를 눌렀을 때 2 페이지 전의 페이지로 이동
12
  if (!isLoggedIn) {
13
    return <Navigate to="/login" replace={true} />
14
  }
15

16
  return <div>마이 페이지</div>
17
}

1
export default function App() {
2
  return (
3
    <Routes>
4
      <Route element={<Layout />}>
5
        <Route index element={<Home />} />
6
        <Route path="/about" element={<About />} />
7
        <Route path="/profiles/:username" element={<Profile />} />
8
      </Route>
9
      <Route path="/articles" element={<Articles />}>
10
        <Route path=":id" element={<Article />} />
11
      </Route>
12
      <Route path="/login" element={<Login />} />
13
      <Route path="/mypage" element={<MyPage />} />
14
      <Route path="*" element={<NotFound />} />
15
    </Routes>
16
  )
17
}