[react] React Router (BrowserRouter, Routes, Route, Link, Outlet, useParams)

📍 react router ?? 

• 리액트 어플리케이션에 라우팅 기능을 제공하는 라이브러리
• 단일 페이지 어플리케이션에서 여러 페이지를 만듦
• URL 매개 변수 및 Query String 처리
• 브라우저 History 및 탐색 관리
• 중첩된 경로 레이아웃 만들기
• 인증을 위한 보호된 경로 구현
• 설치 방법?
  • npm install react-router-dom

 

 

📍 BrowserRouter, Routes, Route, Link, Outlet, useParams 

• import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';
  • 사용할 때 import 해줘야함!
• BrowerRouter
• Routes , Route
• Link
• Outlet
  • <Outlet /> { /** 추가적인 컴포넌트가 들어갈 위치에는 Outlet 을 넣어야함. */}
• userParams 
  • <Routes>
           <Route path="/customer/:name" element={<Info />} /> { /** 자바의 pathvariable 과 비슷한 느낌. */}
    </Routes>
  • 파라미터는 자동으로 들어가게 함.
    • const { name } = useParams();

import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams, NavLink } from 'react-router-dom';
import './Navbar.css';

function Home(){
    return <h1>home Page</h1>
}

function About(){
    return (
        <div>
            <h1>about page</h1>
            <nav>
                <Link to="/about/ceo">Ceo</Link>
            </nav>
            <Outlet /> { /** 추가적인 컴포넌트가 들어갈 위치에는 Outlet 을 넣어야함. */}
        </div>
    );
}

function Contact() {
    return <h1>contact Page</h1>
}


function AboutCeo() {
    return <h2>About Ceo</h2>
}

function Info() {
    const { name } = useParams();
    return <h1>저는 {name} 입니다.</h1>
}

function App2() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/customer/홍길동">홍길동</Link> | {(" ")}
                <Link to="/customer/김철수">김철수</Link> | {(" ")}
                <Link to="/customer/정숙">정숙</Link>
            </nav>
            <Routes>
                <Route path="/customer/:name" element={<Info />} /> { /** 자바의 pathvariable 과 비슷한 느낌. */}
            </Routes>
        </BrowserRouter>
    );
}


const naveLinkStyles = ( {isActive} ) => ( 
    {
        color: isActive ? 'blue' : 'gray',
        textDecoration : isActive ? 'none' : 'underline',
        fontWeight : isActive ? 'bolder' : 'normal'
    }
);


function App() {
    return (
        <BrowserRouter>
        { /* 네비게이션*/ }
        <h1>방법 1</h1>
        <nav>
            <NavLink to="/" style={naveLinkStyles}>홈</NavLink> | {" "}
            <NavLink to="/about" style={naveLinkStyles}>회사소개</NavLink> | {" "}
            <NavLink to="/contact" style={naveLinkStyles}>문의하기</NavLink>
        </nav>
        <h1>방법 2</h1>
        <nav>
            <NavLink to="/">홈</NavLink> | {" "}
            <NavLink to="/about">회사소개</NavLink> | {" "}
            <NavLink to="/contact">문의하기</NavLink>
        </nav>
        <h1>방법 3</h1>
        <nav>
            <NavLink to="/" className={ ({isActive}) => (isActive ? 'active-link' : 'inactive-link' ) } >홈</NavLink> | {" "}
            <NavLink to="/about" className={ ({isActive}) => (isActive ? 'active-link' : 'inactive-link' ) } >회사소개</NavLink> | {" "}
            <NavLink to="/contact" className={ ({isActive}) => (isActive ? 'active-link' : 'inactive-link' ) } >문의하기</NavLink>
        </nav>
        { /** routes */}
        <Routes>
            { /** Route의 path 로 들어왔을 때, --> element 의 것을 호출하라. */}
            <Route path="/" element={<Home />} /> 
            <Route path="/about" element={<About />}>
                <Route path="ceo" element={<AboutCeo />} />
            </Route>
            <Route path="/contact" element={<Contact />} />
        </Routes>
        </BrowserRouter>
    );
}

createRoot(document.getElementById('reactRouter')).render(
    <App />
);

왼 (:name (자바의 pathvariable과 비슷)) 오 (NavLink 의 isActive 값을 이용해서 다른 style을 처리할 수 있음)

 

📍 NavLink 를 이용해서 active 할때마다 다른 css 처리하는 방법 ?

• isActive 값을 true, false 로 받아올 수 있음.
  • isActive 는 이름이 무조건 고정되어 있음.
• 각 컴포넌트를 비교해서, link 가 되어 있으면 --> true 값이 나옴.
• NavLink 는 클릭 할때마다 다른 style을 넣을 때 --> 주로 사용됨.
• 방법 1 
  • <NavLink to="/" style={naveLinkStyles}>홈</NavLink>
  • const naveLinkStyles = ( {isActive} ) => ( 
        {
            color: isActive ? 'blue' : 'gray',
            textDecoration : isActive ? 'none' : 'underline',
            fontWeight : isActive ? 'bolder' : 'normal'
        }
    );
• 방법 2
  • Link 클릭 되면 --> 해당 링크에 자동으로 active 라는 클래스 생김.
  • nav > a.active { ~~ } 처리 해줘도 됨.

 

• 방법 3
  • <NavLink to="/" className={ ({isActive}) => (isActive ? 'active-link' : 'inactive-link' ) } >홈 </NavLink>
  •  

 

 

📍 ?

• ㅇㅇ 

 

---

출처 : 

[왕초보 홈페이지 만들기 리액트 기초]

https://www.youtube.com/watch?v=NxETFxGL8A4&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=34

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.