전체 글

[프론트엔드] react router v6 NavLink

이전 글 2022.03.21 - [분류 전체보기] - [프론트앤드] react router v6 NavLink 1. NavLink 사용 예제 - Profiles.js v6 버전에서 NavLink 사용 방법은 동일하나 activeStyle, activeClassName 속성이 삭제되었다. 따라서 아래와 같이 NavLink 태그안에 isActive를 선언하여 활성화시키고 싶은 스타일에 css를 적용 할 수 있다. (클릭/활성화 시 active class 변경됨) import React from "react"; import { NavLink, Route, Routes } from 'react-router-dom' import Profile from "./Profile"; const Profiles = () =..

[프론트엔드] react router v6 Switch

이전 글 2022.03.21 - [프론트엔드/React] - [프론트엔드] react router v6 withRouter 1. Switch 사용 예제 - App.js v6 버전에서 Switch 사용하려면 Routes로 라우팅 경로만 설정해주면 된다. Routes를 아래처럼 분리한 후 전체경로를 기준으로 보여줄 내용을 html 태그로 설정한다. 아래왁 같이 작성함으로써 Swtch 기능을 사용한 예외처리가 동일하게 가능하다. import React from 'react'; import {Link, Route, Routes} from 'react-router-dom'; import About from './About'; import Home from './Home'; import Profiles from '..

[프론트엔드] react router v6 withRouter

이전 글 2022.03.19 - [프론트엔드/React] - [프론트엔드] react router v6 history 사용법 1. withRouter 사용 예제 - withRouterSample.js widthRouterSample.js 파일을 생성하여 아래와 같이 소스를 작성한다. v5에서 사용한 withRouter 함수가 사라진관계로 v6에서 아래 함수를 사용하였다. useparms, useLocation, useNavicate import { useParams, useLocation, useNavigate } from 'react-router-dom'; const WithRouterSample = () => { const params = useParams(); const location = useL..

[프론트엔드] react router v6 history 사용법

이전 글 2022.03.17 - [프론트엔드/React] - [프론트엔드] react router v6 서브라우팅 1. history 사용 예제 - App.js App.js에서는 컴포넌트를 렌더링하고, History 경로로 호출한다. 위에서 li 태그로 History 경로를 추가해준다. import React from 'react'; import {Link, Route, Routes} from 'react-router-dom'; import About from './About'; import Home from './Home'; import Profiles from './Profiles'; import HistorySample from './HistorySample'; const App = () => { ..