2. React Router 기본 셋팅

여러 페이지를 만들고 싶다면 라우터 이용.
그러기 위해서는 react-router-dom이라는 라이브러리 설치. 

npm install react-router-dom

 

그리고 index.js 파일에 필요한 컴포넌트를 import 해준다

이때 index.js 파일은 쉽게 말하자면 App.js에 있는 <App> 컴포넌트를 index.html에 꽂아주는 파일이라고 보면 된다.

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

<App/> 태그를 <BrowserRouter> 태그로 감싸준다.

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

라우팅 준비 끝.

 

이제 라우팅으로 페이지를 나누는 법을 살펴보자.

App.js 파일로 간다.

1. 필요한 태그들 import해주기

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

2.  라우트 해주려는 페이지들을 <Route> 태그로 추가. path 속성으로 주소 넣어주고, element 속성으로 그 때 보여주려는 페이지 컴포넌트 넘겨줌. 이때 <Route> 태그들을 <Routes> 태그로 감싸줌.

※ react-router-dom v6로 업데이트하며 달라진 점!

Upgrading from v5 v6.3.0

 

참고한 블로그

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

• Switch 태그가 Routes 태그로 변경
• exact 속성 삭제. 그 대신 복수의 라우팅을 매칭하고 싶은 경우 경로 뒤에 * 사용. 중첩 라우팅 관련 내용은 더 있으니 위의 블로그에서 확인 후 사용.
• 이외에도 다양한 내용 업데이트. 위의 블로그에서 확인

import React from 'react';
import './App.css';
import Nav_ from './components/Nav';
import Login from './pages/Login';
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Nav_ />
      <Routes>
        <Route path="/" element={"Main page"}/>
        <Route path="/login" element={<Login/>}/>
      </Routes>
    </div>
  );
}

export default App;

이렇게 해주면 

http://localhost:3000/에서는

http://localhost:3000/login에서는 다음과 같은 화면이 보임.

이제 <Link> 상단의 햄버거 버튼 누르면 나오는 버튼들로 페이지 이동이 가능하게 해보자.

Nav.js 파일로 가서 필요한 모듈 import 해주고 다음과 같이 바꿔주면 된다.

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

...생략...
                  <Nav.Link><Link to="/">Home</Link></Nav.Link>
                  <Nav.Link><Link to="/login">Login</Link></Nav.Link>

그러면 Navbar에서 Home을 누르면 Main page로, Login을 누르면 Login page로 갈 수 있다.

href 값에 경로를 넣어서 페이지 이동도 가능하지만 이렇게 하면 페이지를 새로 불러와서 상태 값을 잃고 속도가 저하된다.

Link 태그를 이용하면 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않으므로 Link 태그를 사용하는 것을 추천한다.

<Nav.Link><Link to="/login">Login</Link></Nav.Link>
<Nav.Link href="/login">Login</Nav.Link>

위와 아래 모두 같은 페이지로 이동한다. 그렇지만 효율성을 위해 Link 태그를 사용하는 위의 코드로 쓰도록 하자.

 

이제 상단 Navbar에 뒤로 가기 버튼도 하나 추가해보자.

우선 Nav.js파일에서 react-router-dom의 useNavigate를 import 해주자. 참고로 useHistory가 react-router-dom v6에서 useNavigate로 바뀌었다.

※ 참고 블로그

React Router v6 업데이트 정리

그리고 뒤로 가기 버튼을 상단 바에 추가하고 다음과 같이 코드를 쓰면 된다.

...import 어쩌구 생략....
import { Link, useNavigate } from 'react-router-dom';

function Nav_() {
  let navigate = useNavigate();
  return (
    <div>
    {['lg'].map((expand) => 
        <Navbar key={expand} bg="light" expand={expand} className="mb-3">
          <Container fluid>
            <Button onClick={()=>{navigate(-1)}}>뒤로가기</Button>
            <Navbar.Brand href="/">TMI</Navbar.Brand>
            ...생략...

인자로 경로를 넣어주면 해당 경로로 이동도 가능한데 나는 뒤로 가기 버튼을 만드는 것이므로 이전의 useHistory에서 goback() 메소드와 같은 기능을 하도록 -1을 인자로 넣어주었다.