프론트엔드/React

[프론트엔드] react router v6 Query 읽는법 (location)

이전 글 2022.03.16 - [프론트엔드/React] - [프론트엔드] react router v6 Query 읽는법 (location) 2022.03.14 - [프론트엔드/React] - [프론트엔드] REACT ROUTER-TUTORIAL 오류 수정 ​ 1. userLocation() 사용 import React from "react"; import { useLocation } from "react-router-dom"; const About = () => { const { search } = useLocation(); //현재 지금 경로가(search) '?detail=true' 인지 확인 const showDetail = search === '?detail=true'; return ( 소개 이..

[프론트엔드] React Router v6 match.parms 사용방법

이전 글 2022.03.14 - [프론트앤드/React] - [프론트앤드] REACT ROUTER-TUTORIAL 오류 수정 1. userParms() 사용 이전 리엑트 라우터 튜토리얼에서 React Router 버전이 최신버전으로 변경되어 오류를 수정하였다. 이번에는 v6 버전에서 match.parms 사용하는 방법을 찾아서 수정하였다. See the Pen Untitled by S-YC (@s-yc) on CodePen. 2. 수정 후 화면 - 공식 문서 https://velog.io/@soryeongk/ReactRouterDomV6 [React] A is only ever to be used as the child of element, never rendered directly. Please wra..

[프론트엔드] React Router v6 업데이트

React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공식문서 Switch가 사라지고, Routes 등장 Routes는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes로 기존 Switch의 기능을 대체 가능 기존 코드 v6 코드 useHistory가 사라지고, useNavigate 등장 useNavigate로 기존에 useHistory의 기능을 전부 대체 가능 useHistory의 history는 객체였지만 useNavigate의 navigate는 함수다. 기존 코드 const history = useHistory(); history.push('/'); history.goback()..

[프론트엔드] REACT ROUTER-TUTORIAL 오류 수정

index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 1. 오류 원인 리엑트 라우터 설치 및 공부중 위와 같은 오류가 발생하였다. [React] A is only ever to be used as the child of element, never rendered directly. Please wrap your in ㅋㅋㅋㅋㅋㅋㅋㅋ 에러문구가 시키는대로 로 감싸주었는데도 해결 못하셔서 찾아오신분들 환영합니다. 'react-router-dom' 라이브러리가 버전 업데이트가 됬어요...! 의 매개변수 이름이 변경되었습 developer..