게임모드공유웹 <ModHub> 제작기 - 상단 네비게이션바 구현하기(2)

임시로 작성한 app.jsx, app.css, navigation.jsx의 코드를 다 날리고

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

function ColorSchemesExample() {
  return (
    <>
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
}

export default ColorSchemesExample;

부트스트랩에서 적절한 네비게이션바 찾아서 Navigation.jsx에 적용
클래스이름을 Navigation으로 맞춰주고(ColorSchemesExample→Navigation)

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

//아래와 같이 줄여 쓸 수 있음
import {Navbar, Nav, Container} from 'react-bootstrap'

<div className='Navigation'>

App.jsx에서 받아가야하므로 클래스 네임을 주고

Navigation.jsx

import React from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import 'bootstrap/dist/css/bootstrap.min.css'

function Navigation() {
  return (
    <div className='Navigation'>
      <Navbar bg="light" data-bs-theme="light" fixed='top'>{/*백그라운드 밝게, 상단 고정*/}
        <Container>
          <Navbar.Brand href="home">ModHub</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="game-mod">게임모드</Nav.Link>
            <Nav.Link href="community">커뮤니티</Nav.Link>
            <Nav.Link href="test">테스트</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}
export default Navigation;

App.jsx

function App() {
  return (
    <div className="App">
      <Navigation />
    </div>
  );
}
export default App;

App.jsx에서 Navigation을 받아와 출력

// eslint-disable-next-line no-unused-vars
import React from "react";
import Navigation from "./components/Navigation";
import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from './pages/Home';
import GameMod from './pages/GameMod';
//import Test from './pages/Test';
function App() {
  return (
    <div className="App">
      <BrowserRouter>
      <Navigation />
      <Routes>
        <Route exact path="/home" element={<Home />} /> 
        <Route path="/game-mod" element={<GameMod />} />
        {/*<Route path="/test" element={<Test />} />*/}

      </Routes>
      </BrowserRouter>
    </div>
  );
}
  
export default App;

페이지 이동을 위한 라우터 설정

exact path: URL이 정확히 일치할 때만 해당 라우트가 매칭되도록 하는 prop

<Route path="/users" component={UserList} />
<Route path="/users/new" component={CreateUser} />

위와 같이 작성할 시 /users/new URL로 접속하면 두 라우트가 모두 매칭되어 둘 다 렌더링이 되버린다. 이럴 경우에 중복을 방지하기 위해 exact path를 사용한다.
참고로 React Router v6에서는 이런 문제를 자동으로 처리하도록 개선되어 exact가 굳이 필요없게 되었다.

💡VScode 주석 처리: ctrl + ' / '