라우터를 사용하여 ReactJS에서 Bootstrap 5 Navbar 설정

프론트엔드셰이프에 오신 것을 환영합니다. 오늘 우리는 react router 6을 사용하여 react bootstrap 5 navbar 메뉴를 만들 것입니다. 먼저 부트스트랩 5를 사용하여 react 앱을 만들어야 합니다. 이 섹션에서는 vite 및 typescript와 react bootstrap을 사용합니다. 아래 기사를 읽을 수 있습니다.
Install & Setup Vite + React + Typescript + Bootstrap 5
view

npm install react-router-dom@6

src에 Page 폴더를 생성하고 About.tsx, Home.tsx 파일을 생성합니다.
src/페이지/Home.tsx

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
}

src/페이지/Contact.tsx

import React from 'react'

export default function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
    </div>
  )
}

src/페이지/About.tsx

import React from 'react';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
    </div>
  );
}

구성 요소 폴더를 만들고 라우터 링크가 있는 반응 부트스트랩 navbar를 추가합니다.
src/Components/Menu.tsx

import React from 'react';
import Container from 'react-bootstrap/Container';
import { Link } from 'react-router-dom';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

export default function Menu() {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" className="p-3">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/">
                Home
              </Link>
            </Nav.Link>
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/about">
                About
              </Link>
            </Nav.Link>
            <Nav.Link>
              {' '}
              <Link className="text-decoration-none text-white" to="/contact">
                Contact Us
              </Link>
            </Nav.Link>
          </Nav>
          <Nav className="gap-2">
            <Nav.Link className="btn btn-primary" href="#">Login</Nav.Link>
            <Nav.Link eventKey={2} className="btn btn-light text-black" href="#">
              Sign up
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

다음으로 App.tsx에서 라우터와 페이지를 설정합니다.
src/App.tsx

import { useState } from 'react';

import { Routes, Route, Link, BrowserRouter } from 'react-router-dom';
import Home from './Page/Home';
import About from './Page/About';
import Error from './Page/Error';
import Menu from './Components/Menu';
import Contact from './Page/Contact';

function App() {
  return (
    <>
      <BrowserRouter>
        <Menu />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<Error />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

서버를 실행합니다.

npm run dev