[React] react-router-dom

설치

 

리액트에서 페이지를 나눌때에는 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는게 일반적입니다.

 

터미널에서

npm install react-router-dom

을 입력해서 설치하도록 합니다.

 

사용하는 법

index.js 에 가서

import { BrowserRouter } from "react-router-dom";

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

이렇게 <App />을  BrowserRouter 태그로 감쌉니다.

 

 

사용하는 방법은 다음과 같습니다.

App.js 에 다음과 같이 Routes 와 Route 태그를 이용해서 코드를 작성해줍니다.

아래 예시에서는 Sign up 과 Sign in 에 관련된 페이지를 만들도록 했습니다.

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Signup from "./Signup";
import Signin from "./Signin";

function App() {
    return (
        <Routes>
            <Route path="/" element={<div>hi</div>} />
            <Route path="/signup" element={<Signup />} />
            <Route path="/signin" element={<Signin />} />
        </Routes>
    );
}

export default App;

이런식으로 코드를 작성하면 페이지를 두 개 만들 수 있습니다.

보여줄 화면은 element에 작성해주면 됩니다.

 

페이지 이동

페이지 이동은 더이상 a 태그를 이용하지 않습니다.

만약 a 태그를 이용한다면, 새로고침이 될 것입니다.

(이것은 MPA의 특징입니다. 하지만 우리는 SPA를 이용하여 쾌적한 사용자 경험을 만들어낼 것이기 때문이죠.)

 

페이지 이동 버튼은 Link 라는 것을 이용해서 경로를 적어서 구현할 수 있다.

먼저 Link 를 import 해와줍니다.

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

그리고 아래처럼 작성해주면 되는데요.

to 라는 프로퍼티에 경로를 작성해줍니다.

<Link to="/detail">상세페이지</Link>

 

아래는 Link 사용 예시입니다.

RouteTest.js

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

function RouteTest() {
    return (
        <div>
            <Link to={"/"}>Home</Link>
            <br></br>
            <Link to={"/diary"}>Diary</Link>
            <br></br>
            <Link to={"/edit"}>Edit</Link>
        </div>
    );
}

export default RouteTest;

App.js

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

import RouteTest from "./components/RouteTest";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <h2>app.js</h2>
                <Routes>
                    <Route path="/" element={<Home />}></Route>
                    <Route path="/new" element={<New />}></Route>
                    <Route path="/edit" element={<Edit />}></Route>
                    <Route path="/diary" element={<Diary />}></Route>
                </Routes>

                <RouteTest></RouteTest>
            </div>
        </BrowserRouter>
    );
}

export default App;

---

navigate 함수

nested routes

 

이것들을 사용하려면 일단 상단에서 import 해와야 할게 있습니다

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

useNavigate 와 Outlet 입니다.

 

먼저 navigate 함수는 페이지 이동을 하고 싶을 때 사용합니다

<Nav className="me-auto">
            <Nav.Link
              onClick={() => {
                navigate("/");
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detail
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/about");
              }}
            >
              About
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/event");
              }}
            >
              Event
            </Nav.Link>
          </Nav>

위에 이동버튼을 만들때 onClick 함수 안에서 써주었습니다

 

useNavigate 로 뒤로가기 버튼 만들기

+ navigate 안에 -1 넣으면 뒤로가기 기능, 2 넣으면 앞으로 2번가기 기능입니다.

아래와 같이 구현할 수 있습니다.

import React from "react";
import { useNavigate, useSearchParams } from "react-router-dom";

function Edit() {
    const navigate = useNavigate();
    const [searchParams, setSearchParams] = useSearchParams();
    const id = searchParams.get("id");
    const mode = searchParams.get("mode");
    return (
        <div>
            <h1>이곳은 일기 수정 페이지 입니다</h1>
            <button
                onClick={() => {
                    setSearchParams({ who: "dawon" });
                }}
            >
                {" "}
                바꾸기{" "}
            </button>
            <button
                onClick={() => {
                    navigate("/home");
                }}
            >
                홈으로 돌아가기
            </button>
            <button
                onClick={() => {
                    navigate(-1);
                }}
            >
                뒤로가기
            </button>
        </div>
    );
}

export default Edit;

위와 같이 navigate(-1) 을 작성함으로써 뒤로가기 버튼을 구현할 수 있음을 확인할 수 있습니다.

---

404 페이지

        <Route path="*" element={<div>404</div>}></Route>

* 별 기호는 내가 지정한 경로가 아닌 모든 나머지 경로를 말합니다.

이상한 경로로 들어갔을 때 404가 뜨도록 해봤습니다.

 

---

nested Routes

 

이것은 서브 경로를 만들수 있습니다.

예를 들어 /about/member 와 /about/location 이런식으로 말이죠

 

근데 <Route></Route> 안에 또 <Route></Route> 를 넣을 수 있습니다

이걸 nested routes 라고 부릅니다

 

예시는 아래와 같습니다

        <Route path="/about" element={<About />}>
          <Route path="member" element={<Member />}></Route>
          <Route path="location" element={<Location />}></Route>
        </Route>

이런식으로 쓰면 결국에 /about/member 와 /about/location  를 의미합니다.

대신에 이렇게 쓰려면 저 Member 와  Location  컴포넌트가 들어갈 자리를 마련해줘야합니다.(뚫어줘야함)

결국 저 두 컴포넌트가 들어가는 자리는 About 컴포넌트입니다.

About 컴포넌트에 Outlet 태그를 이용해서 자리를 마련해봅시다.

function Member() {
  return <div>member list</div>;
}
function Location() {
  return <div>location</div>;
}

function About() {
  let navigate = useNavigate();

  return (
    <div>
      <Button
        onClick={() => {
          navigate("/about/member");
        }}
      >
        member
      </Button>
      <Button
        onClick={() => {
          navigate("/about/location");
        }}
      >
        location
      </Button>

      <Outlet></Outlet>
    </div>
  );
}

각각 버튼을 눌렀을 때 다른 컴포넌트가 뜨도록 해봤습니다.