[React.js] Router 사용하기

정회민·2023년 7월 8일

목록 보기

2/2

react 18 버전을 사용하고 있다.
router는 6버전을 사용할 것이다.

1. 라우터 설치

$ npm install react-router-dom@6

2. Router 사용하기

1) BrowserRouter

react-router-dom 에는 BrowserRouter와 HashRouter 두 가지가 있는데 BrowserRouter는 HTML5의 History API를 사용해서 페이지를 새로 불러오지 않고도 동적인 페이지를 보여줄 수 있고 HashRouter는 URL의 hash를 사용한 라우터로 정적인 페이지를 만들때 적합하다.

동적인 페이지를 만들 것이기 때문에 BrowserRouter를 사용한다.
src/index.js 파일에서 <App />를 BrowserRouter로 감싼다.

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


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

2) 페이지 만들기

Room 페이지와 Chat 페이지를 만들어 라우터에 붙여주기 위해 Room.js와 Chat.js를 만든다.

// Room.js
const Room = () => {
  return (
      <div>
        <h1>Room</h1>
      </div>
  );
}

export default Room;

// Chat.js
const Chat = () => {
  return (
      <div>
        <h1>Chat</h1>
      </div>
  );
}

export default Chat;

3) App.js에 페이지 연결

Route 컴포넌트를 이용해 페이지를 연결한다.

// App.js
import {Route, Routes} from "react-router-dom";
import Room from "./components/Room/Room";
import Chat from "./components/Chat/Chat";

function App() {
  return (
      <Routes>
        <Route path="/room" element={<Room />} />
        <Route path="/Chat" element={<Chat />} />
      </Routes>
  );
}

export default App;

4) Navigate 사용하기

만약 '/'에 대한 화면을 만들지 않았으나 사용자가 '/'로 이동하려고 한다면 Login 화면으로 보내기 위해 <Route /> 컴포넌트와 <Navigate /> 컴포넌트를 이용할 수 있다.

<Routes>
  <Route path="/" element={ <Navigate replace to="/login"/> } />
  <Route path="/login" element={ <Login /> } />
</Routes>

5) Link or useNavigate 사용하기

다른 페이지로 이동할 때 react-router-dom에서는 Link 컴포넌트를 이용해 페이지 로딩 없이 다른 페이지로 이동할 수 있다.

// Room.js
import {Link} from "react-router-dom";

const Room = () => {
  return (
      <div>
        <h1>Room</h1>
        <Link to="/chat?name=hoeminj&room=jroom"><button>이동</button></Link>
      </div>
  );
}

export default Room;

또한 useNavigate를 사용해도 된다.

// Room.js
import {useNavigate} from "react-router-dom";

const Room = () => {
  const navigate = useNavigate()
  const onClickButton = () => {
    navigate('/chat?name=hoeminj&room=jroom')
  }
  return (
      <div>
        <h1>Room</h1>
        <button onClick={onClickButton}>이동</button>
      </div>
  );
}

export default Room;

6) useLocation 사용하기

위에서 ?label=hi 이런 형식으로 뒤에 파라미터를 전달한 것을 useLocation 함수를 이용해 받아올 수 있다.

// Chat.js
import { useLocation } from "react-router-dom";

const Chat = () => {
  const location = useLocation();
  return (
      <div>
        <h1>Chat</h1>
        <p>쿼리 스트링: {location.search}</p>
      </div>
  );
}

export default Chat;

이때 쿼리 스트링을 사용하기 위해 useLocation 대신 useSearchParams를 이용한다.
useSearchParams는 react-router-dom 버전 6 부터 지원한다.

다음 변경한 코드와 같이 쿼리를 파싱할 수 있다.

// Chat.js
import { useSearchParams } from "react-router-dom";

const Chat = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  const name = searchParams.get('name')
  const room = searchParams.get('room')
  return (
      <div>
        <h1>Chat</h1>
        <p>name: {name}</p>
        <p>room: {room}</p>
      </div>
  );
}

export default Chat;