티스토리 뷰
import { Route, Routes } from "react-router-dom";
import Footer from "./inc/footer";
import UserHead from "./inc/frontHead";
import Header from "./inc/header";
import Main from "./main/main";
import WorkView from "./work/workView";
import WorkList from "./work/workList";
import About from "./about/about";
import Contact from "./contact/contact";
import { useState } from "react";
function Front(){
return(
<div className="wrapper">
<UserHead />
<Header />
<Routes>
<Route path="/" element={<Main /> } />
<Route path="/work/view/:id" element={<WorkView /> } />
<Route path="/work" element={<WorkList /> } />
<Route path="/about" element={<About /> } />
<Route path="/contact" element={<Contact /> } />
</Routes>
<Footer />
</div>
)
}
export default Front;
위의 코드처럼 페이지마다 각각 1path로 구성되어있다.
(/work의 하위가 3path인 /work/view/*의 모양)
여기서 Header컴포넌트 안에는
import { NavLink } from "react-router-dom";
function Header(){
return(
<div className="header">
<div className="wrap">
<h1 className="logo"><NavLink to="/" activeClassName="active"><img src="/resources/image/logo.svg" alt="LOOP motion studio" /></NavLink></h1>
<button className="btn_menu"><span className="blind">전체메뉴</span></button>
<div className="menu_wrap">
<ul className="gnb">
<li><NavLink to="/about" activeClassName="active">ABOUT</NavLink></li>
<li><NavLink to="/work" activeClassName="active">WORK</NavLink></li>
<li><NavLink to="/contact" activeClassName="active">CONTACT</NavLink></li>
</ul>
<ul className="sns">
<li><a href="https://www.youtube.com/@loop_motionstudio" target="_blank" title="새창" className="sns_y"><span className="blind">루프 유튜브</span></a></li>
<li><a href="https://vimeo.com/user172433218" target="_blank" title="새창" className="sns_v"><span className="blind">루프 </span></a></li>
<li><a href="https://www.instagram.com/loop_motionstudio/" target="_blank" title="새창" className="sns_i"><span className="blind">루프 인스타그램</span></a></li>
</ul>
</div>
</div>
</div>
)
}
export default Header;
( 해당 메뉴임을 표시하도록 css로 색을 입혀야 하는 상황)
이와 같은 코드로 되어있다. 여기에서 NavLink 부분을 통해 to="/work" 로 넣으면 html 상으로는 a태그가 된다. 속성으로 activeClassName="active"를 사용할 수 있다.
도메인/work로 들어올 경우 자동으로 class에 active가 추가된다. 이는 하위인 /work/view/*로 들어와도 active가 작동된다.
처음에는 목록은 /work/init으로 했고 상세페이지는 /work/view/*로 두어서 작동되지 않았다. to="/work/init"으로 표시해야 했기 때문이다.
따라서 react를 사용할 때에는 이런 부분을 감안해서 path를 짜야한다.
'개발일기' 카테고리의 다른 글
스웨거 등 @Tag 어노테이션 등 (0) | 2024.05.08 |
---|---|
CORS 오류 (0) | 2024.05.01 |
amazon S3 연결 해보기 (0) | 2024.04.22 |
루프크리에이티브 Version2 제작(Spring Data JPA, React.js 후기) (0) | 2024.04.20 |
결국 취직에 성공(?)은 했다. (0) | 2021.05.21 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- thymleaf
- HTTP
- 백엔드 개발자 공부
- 항해99
- 스프링부트
- 컨트
- 향해99
- 향해플러스백엔드
- jpa api
- 인터셉터
- rejectValue
- ArgumentResolver
- 로그인
- Java
- react실행
- React
- BindingResult
- SpringBoot
- 스프링공부
- 예외처리
- Intercepter
- filter
- hypertexttransferprotocol
- JPA
- 리터럴
- 항해플러스
- reject
- 백엔드 개발자 역량
- 향해플러스
- exception
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함