[React] 하단 네비게이션 만들기

만든지는 한~ 참 되었지만 까먹기 전에 얼른 써야겠다 

 

완성된 모습

---

✅ 하단 네비 커스텀 요구사항 

1. 클릭 시, 페이지 이동(기본)

2. 페이지에 맞는 Footer메뉴 선택 

3. 페이지 바닥에 고정 

---

👩🏻‍💻 하단 네비 만드는 과정 

1. App.js에 페이지 Router 생성 

기본적으로 페이지를 이동하기 위해서는 페이지 라우팅이 필요하다. 
하단 네비에서 react-router-dom의 Link를 사용할 계획이었기에 App.js에 이러한 라우터를 추가해주었다. 

      <BrowserRouter>
      <Routes>
        <Route path = "/" element ={<Main/>} />
        <Route path ="/*" element = {<NotFound/>}/>
        <Route path ="/travel" element = {<Travel/>}/>
        <Route path ="/calendar" element = {<Calendar/>}/>
        <Route path ="/community" element = {<Community/>}/>
        <Route path ="/mypage" element = {<Mypage/>}/>
      </Routes>
      </BrowserRouter>

 

 

 

2. Footer.jsx 생성 

- Link로 경로를 주고, 메뉴들을 생성해주었다. 

이렇게 요상한 친구가 생긴다!

import { Link } from 'react-router-dom'

export default function Footer() {


  return (
    <div className ='footer-wrap'>
        <Link to="/" className="nav-link" > 
            <div>
                Menu1
            </div>
        </Link>
        <Link to = "/travel" className ="nav-link" >
            <div>
                Menu2
                </div>
        </Link>
        <Link to = "/community" className ="nav-link" >
            <div>
                Menu3
            </div>
        </Link>
        <Link to = "/calendar" className ="nav-link" >
            <div>
                Menu4
            </div>
        </Link>
        <Link to = "/mypage" className ="nav-link" >
            <div>
                Menu4
            </div>
        </Link>
    </div>
  )
}

 

 

 

 

 

3. Footer.jsx 에 Css 적용 

position : fixed를 활용해 바닥에 딱!! 붙어있도록 만들어준다. 

이렇게 예쁘게 어딜가도 바닥에 딱 예쁘게 붙어있는 친구가 생긴다 ~ '

/* Footer - layout.css */

.footer-wrap{
    background-color: #fff;
    position: fixed;
    bottom: 5px;
    left: 5px;
    right: 5px;
    height: 45px;
    border: 1px solid rgba(101, 101, 101, 0.454);
    border-radius: 15px;
    box-shadow: 0 5px 5px 0 gray;
}

.nav-link{
    color:#1f1f1f;
    text-decoration: none;
    float: left;
    width: 20%;
    text-align: center;
    height: 45px;
    line-height: 45px;
}

.main-link{

    color:#1f1f1f;
    text-decoration: none;


}

 

 

 

 

4. Footer.jsx에 FontAwesome 아이콘 추가 

귀여운 네비 ~

▼ FontAwesome 아이콘 활용하는 방법 

[React] FontAwesome 사용하기

// FontAwesome.jsx
import { faLaptop } from "@fortawesome/free-solid-svg-icons";
import { faSuitcase } from "@fortawesome/free-solid-svg-icons";
import { faComments } from "@fortawesome/free-solid-svg-icons"
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faLaptop,faSuitcase,faComments,faCalendar,faUser)

///Footer.jsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react'
import { Link } from 'react-router-dom'
import '../styles/layout.css'
import "./FontAwesome";

export default function Footer() {


  return (
    <div className ='footer-wrap'>
        <Link to="/" className="nav-link" > 
            <div>
                <FontAwesomeIcon icon ="laptop"/>
            </div>
        </Link>
        <Link to = "/travel" className ="nav-link" >
            <div>
                <FontAwesomeIcon icon="suitcase" />
                </div>
        </Link>
        <Link to = "/community" className ="nav-link">
            <div>
                <FontAwesomeIcon icon = "comments" />
            </div>
        </Link>
        <Link to = "/calendar" className ="nav-link" >
            <div>
                <FontAwesomeIcon icon="calendar"/>  
            </div>
        </Link>
        <Link to = "/mypage" className ="nav-link" >
            <div>
                <FontAwesomeIcon icon="user"/>
            </div>
        </Link>
    </div>
  )
}

 

그럼 이렇게 정적인(?) 하단 네비가 만들어진다!

정상적으로 작동하지만, 현재 나의 페이지가 어디인지 하단 네비에는 표시가 되지 않고 있다. 

 

 

 

5. useState를 이용하여 현재 페이지 알려주는 이벤트 추가 

나 캘린더에요 ~

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import '../styles/layout.css'
import "./FontAwesome";

export default function Footer() {


    const [activeNav, setActiveNav] = useState(1);



  return (
    <div className ='footer-wrap'>
        <Link to="/" className="nav-link" onClick={() => setActiveNav(1)}> 
            <div>
                <FontAwesomeIcon
                icon ="laptop"
                className={activeNav === 1 ? "nav-item active" : "nav-item"}/>
            </div>
        </Link>
        <Link to = "/travel" className ="nav-link" onClick={() => setActiveNav(2)}>
            <div>
                <FontAwesomeIcon 
                icon="suitcase"
                className={activeNav === 2 ? "nav-item active" : "nav-item"}/>
                </div>
        </Link>
        <Link to = "/community" className ="nav-link" onClick={() => setActiveNav(3)}>
            <div>
                <FontAwesomeIcon
                icon = "comments"
                className={activeNav === 3 ? "nav-item active" : "nav-item"}/>
            </div>
        </Link>
        <Link to = "/calendar" className ="nav-link" onClick={() => setActiveNav(4)}>
            <div>
                <FontAwesomeIcon 
                icon="calendar"
                className={activeNav === 4 ? "nav-item active" : "nav-item"}/>  
            </div>
        </Link>
        <Link to = "/mypage" className ="nav-link" onClick={() => setActiveNav(5)}>
            <div>
                <FontAwesomeIcon 
                icon="user"
                className={activeNav === 5 ? "nav-item active" : "nav-item"}/>
            </div>
        </Link>
    </div>
  )
}

드디어 완성되어간다 ..! 

이렇ㄱㅔ 완성인 줄 알았으나.. 예상치 못한 에러 발견 

얼른 고쳐보쟛

---

💥 트러블 슈팅 

발견 상황 : 메인페이지에서 마이페이지로 이동 후, WORAVEL로고를 눌러 메인 페이지로 이동 시 

문제 상황 : 페이지 변경이 일어나지만 이에 따른 바텀네비의 변화는 일어나지 않는다. 

 

 

해결 방법

→ 현재 링크를 검사해서 링크에 맞게 useState값을 변경

const [activeNav, setActiveNav] = useState(1);

 

해당 코드를 추가하여 경로 탐색, 경로에 맞는 useState를 부여하니 해결되었다 ~ 

    const location = useLocation();



    const [activeNav, setActiveNav] = useState(1);

    useEffect (()=> {
        console.log("this is location:", location);

        if (location.pathname === '/travel') setActiveNav(2);
        else if (location.pathname ==='/community') setActiveNav(3);
        else if (location.pathname ==="/calendar") setActiveNav(4);
        else if (location.pathname ==="/mypage") setActiveNav(5);
        else setActiveNav(1);
    },[location])

 

그럼 다른 에러가 없길 바라면서 .. 

도움이 되었길 ~~