네비게이션 바에 링크 추가하기

첫 번째 라우트를 설정했으니, 이제 앱의 네비게이션 바에 몇 가지 링크를 추가해 보겠습니다. 이 링크들은 사용자가 처음 앱을 방문할 때 로그인이나 회원가입 페이지로 이동할 수 있게 해줍니다.

Change indicator src/App.tsx 파일의 App 함수 컴포넌트를 다음 코드로 교체하세요.

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Nav>
            <Nav.Link href="/signup">Signup</Nav.Link>
            <Nav.Link href="/login">Login</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes />
    </div>
  );
}

이 코드는 Nav 부트스트랩 컴포넌트 안에 두 개의 링크를 추가합니다. Navbar.Collapse 컴포넌트는 모바일 기기에서 두 링크가 접히도록 보장합니다.

또한 Scratch 로고에 링크를 추가했습니다. 이 링크는 앱의 홈페이지로 연결됩니다.

이제 Nav 컴포넌트를 헤더에 포함시켜 보겠습니다.

Change indicator src/App.tsx 파일 상단에 다음 import 문을 추가하세요.

import Nav from "react-bootstrap/Nav";

이제 브라우저로 이동하면 네비게이션 바에 링크가 보일 것입니다.

네비게이션 바 링크 추가 스크린샷

하지만 링크를 클릭하면 페이지가 새로고침되면서 해당 링크로 이동합니다. 싱글 페이지 앱을 만들고 있기 때문에 페이지를 새로고침하지 않고도 새로운 링크로 라우팅되도록 해야 합니다.

이 문제를 해결하기 위해 React Router와 React Bootstrap과 함께 작동하는 React Router Bootstrap 컴포넌트가 필요합니다. 이 컴포넌트는 Navbar 링크를 감싸고 React Router를 사용해 브라우저를 새로고침하지 않고도 원하는 링크로 라우팅할 수 있게 해줍니다.

Change indicator packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install react-router-bootstrap
$ npm install -D @types/react-router-bootstrap

Change indicator 이제 링크를 LinkContainer로 감싸겠습니다. src/App.tsx 파일의 App 함수 컴포넌트를 다음 코드로 교체하세요.

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <LinkContainer to="/">
          <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        </LinkContainer>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Nav activeKey={window.location.pathname}>
            <LinkContainer to="/signup">
              <Nav.Link>Signup</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/login">
              <Nav.Link>Login</Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes />
    </div>
  );
}

이제 LinkContainer를 import 하겠습니다.

Change indicator src/App.tsx 파일 상단에 다음 import 문을 추가하세요.

import { LinkContainer } from "react-router-bootstrap";

여기서 한 가지 더 작업을 진행합니다. window.location 객체에서 사용자가 현재 있는 경로를 가져와 Nav 컴포넌트의 activeKey로 설정합니다. 이렇게 하면 해당 페이지에 있을 때 링크가 강조 표시됩니다.

<Nav activeKey={window.location.pathname}>

이제 브라우저로 이동해 로그인 링크를 클릭하면 네비게이션 바에서 링크가 강조 표시되는 것을 확인할 수 있습니다. 또한 페이지를 새로고침하지 않고도 리디렉션됩니다.

네비게이션 바 링크 강조 스크린샷

현재 로그인 페이지가 없기 때문에 페이지에 아무것도 렌더링되지 않는다는 것을 알 수 있습니다. 요청한 페이지가 없을 경우를 처리해야 합니다.

다음으로 라우터를 사용해 404 오류를 처리하는 방법을 살펴보겠습니다.

네비게이션 바에 링크 추가하기

SST Guide