react - router - config2

router

01_라우터를 이용한 페이지 구성 방법

앱을 만들고싶은 경로에서 하단 코드로 새로운 app을 만든다.
경로 이동 시
./ : 동일한 경로
../ : 상위경로로 이동

npx create-react-app ./

./ : app 이름을 해당 경로의 이름과 동일하게 설정한다.

App.js 파일에 랜더링할 파일들을 작성해준다.

<Route path="/" element={ <Main/> }>
<Route index element={ <Main/> }/>

path : 경로설정( 루트로 연결 시 Main 컴포넌트로 연결)
루트로 연결하는 방법은 두 가지 코드를 사용할 수 있다.
element : 보여줄 페이지

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={ <Layout/> }>
            <Route index element={ <Main/> }/>
            <Route path="about" element={ <About/>}/>
            <Route path="menu" element={ <Menu/>}/>


          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

react-router-dom 기능 import가 필요
상단에 import 코드를 작성

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

페이지를 불러오기 위한 임폴트 구문도 함께 작성한다.

import Main from './pages/Main';
import About from './pages/About';
import Menu from './pages/Menu';
import Layout from './layouts/Layout';

각 세부 페이지에서 필요한 내용들을 작성해주고,
하단에는 export default Main; 와 같은 구문을 작성해야
App페이지에서 import가 가능하다.

function Main() {

    return (
        <div>
            <h1>메인</h1>
        </div>
    );
}

export default Main;

Link 컴포넌트를 통한 다른 페이지 링크 설정

상단의 Main페이지 상단에 아래와 같은 코드를 추가한다.

< Link to="/about" > 설정으로 페이지를 연결한다.

import { Link } from 'react-router-dom';    // 링크 속성 기능 불러오기


function Main() {

    return (
        <div>
            <h1>메인</h1>
            <nav>
                <Link to="/">HOME</Link>
                <Link to="/about">소개</Link>
                <Link to="/menu">메뉴목록</Link>
            </nav>
        </div>
    );
}

export default Main;

아래와 같이 a태그로 페이지 이동할 수 있도록 만들어진다.

클릭하면 페이지로 이동하게된다.

02_header, nav 고정 page 영역만 변경되는 페이지

react-dom의 Outlet 컴포넌트를 활용한다.

Outlet 컴포넌트는 라우팅되는 컴포넌트를 대체하기 위한 마커 역할을 한다.
헤더나 공통적인 역할을 수행하는 nav 영역 같은 경우 레이아웃으로 위치를 지정하고,
Outlet으로 라이팅 될 컴포넌트를 대체하기 위해 표기해두면 해당 부분만 변경된다.

Layout페이지를 만들어서 header, nav, page 페이지 전체를 관리해야한다.

import Header from "../components/Header";
import Navbar from "../components/Navbar";
import { Outlet } from 'react-router-dom';

function Layout () {

    return (
        <>
            <Header/>
            <Navbar/>
            <Outlet/>
        </>
    );
}

export default Layout;  

App 페이지 작성

아래와 같이 Layout을 루트로 설정(Routes/Route안에 작성, Layout의 Route안에 컨텐츠들의 Route를 작성)
헤더와 네비게이션이 상단에 고정되고
컨텐츠 영역에 메인이 뜨는 것을 확인할 수 있다.

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={ <Layout/> }>
            <Route index element={ <Main/> }/>
            <Route path="about" element={ <About/>}/>
            <Route path="menu" element={ <Menu/>}/>


          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

NavLink 활용
Link 컴포넌트와 거의 유사하게 사용할 수 있다.
현재 Nav의 상태가 active인지에 대한 값을 이용하여 스타일을 조작하거나 클래스 이름을 변경할 수 있다.

기능을 사용하기 위해서 import해준다.

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

스타일을 관리하기 위한 객체를 만들고,

NavLink의 style 속성에 객체 그 자체가 아닌
(콜백)함수를 적어준다.

style 속성에 콜백함수를 전달하게되는데 넘어오는 파라미터 안에 isActive라는 값을 사용할 수 있다.(true,false 형식)

true가 아니라면 undefined를 명시적으로 반환시킨다.

function Navbar() {

    const activeStyle = {
        backgroundColor : 'orangered'
    }

    return (
        <div>
            <ul>
                <li><NavLink to="/" style={ ( {isActive} ) => isActive ? activeStyle : undefined }>HOME</NavLink></li>
                <li><NavLink to="/about" style={ ( {isActive} ) => isActive ? activeStyle : undefined }>소개</NavLink></li>
                <li><NavLink to="/menu" style={ ( {isActive} ) => isActive ? activeStyle : undefined }>메뉴 목록</NavLink></li>
            </ul>
        </div>
    );
}