[React] 리액트 라우터 : 세팅, 기본 라우팅, 페이지 나누기

페이지를 나누고 싶으면 일반 html,css,js 사이트는 html 파일을 여러개 만드면 html 파일이 각각 하나의 페이지지만 리액트는 html 파일을 하나만 사용한다.

리액트에서는 다른 페이지를 요청하면 내부에 있는 <div>를 변경하여 보여 준다.

직접 코드를 짜는 것보다 react-router-dom이라는 외부 라이브러리를 설치하여 구현하는 게 일반적이다.

react-router-dom 설치

터미널을 열고 설치 명령어를 입력해 준다.

npm install react-router-dom@6

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>
);

index.js 에서 import 한 뒤 <BrowserRouter>로 <App />을 감싸면 된다.

설치, 세팅 방법은 공식 사이트(https://reactrouter.com/en/main)에서 확인할 수 있다.

라우터로 페이지 나누기

1. 상단에 Routes, Route 컴포넌트를 import 한다.

2. <Routes> 만들고, 그 안에 <Route>를 작성한다.

3. <Route path="/url경로" elemnet={ <보여줄 html> } /> 를 작성한다.

Route라는 컴포넌트는 페이지라고 생각하면 된다. 페이지가 4개 필요하다면 Route를 4개 만들면 되는 것.

(App.js)

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

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인 페이지입니다.</div>}></Route>
        <Route path="/detail" element={<div>detail 페이지입니다.</div>}></Route>
        <Route path="/about" element={<div>about 페이지입니다.</div>}></Route>
        <Route path="*" element={<div>없는 페이지입니다.</div>}></Route>
      </Routes>
    </div>
  );
}

export default App;

이렇게 페이지를 3개 만들었다. url 뒤에 /detail, /about 입력해 보자.

<Route path="/">에서 "/"는 메인 페이지를 의미한다.

<Route path="*">에서 "*"는 모든 경로를 의미한다. 위에 만들어 놓은 /detail, /about 등의 경로가 아닌 다른 페이지 접속시 * 경로로 안내해 준다. 유저가 이상한 경로로 접속했을 때 없는 페이지를 나타내는 404 페이지를 만들 때 사용하면 된다.

페이지 이동 버튼

사용자들은 주소창에 url을 입력해서 들어가지 않고 링크를 타고 들어간다.

1. 상단에 react-router-dom에서 Link 컴포넌트를 import 한다.

2. 원하는 곳에 <Link to="/url경로">링크명</Link>를 작성한다.

(App.js)

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

function App() {
  return (
    <div className="App">
      <Link to="/">Home </Link>
      <Link to="/detail">Detail </Link>
      <Link to="/about">About </Link>

      <Routes>
        <Route path="/" element={<div>메인 페이지입니다.</div>}></Route>
        <Route path="/detail" element={<div>detail 페이지입니다.</div>}></Route>
        <Route path="/about" element={<div>about 페이지입니다.</div>}></Route>
        <Route path="*" element={<div>없는 페이지입니다.</div>}></Route>
      </Routes>
    </div>
  );
}

export default App;