React/Router
-
React - JS로 라우팅 이동하기React/Router 2021. 6. 5. 20:15
Router의 Props history 객체 사용 go, push, replace 등등.. // App.js function App() { return ( ); } // Login.jsx import LoginButton from '../components/LoginButton'; export default function Login(props) { return ( Login 페이지 입니다. ); } // LoginButton.jsx export default function LoginButton(props) { const login = () => { setTimeout(() => { // 페이지 이동 props.history.push('/'); }, 1000); }; return 로그인하기; } 하지만..
-
React- Router Link ComponentReact/Router 2021. 6. 5. 19:33
Link Component React에서 a태그 사용 시 원치 않은 결과를 가져옴 React App에서 페이지 이동 시 react-router-dom 에서 제공하는 Link 컴포넌트 사용 a 태그의 href 대신 Link 컴포넌트에서는 to props 사용 // App.js import Links from './components/Links'; function App() { return ( ); } // Links.jsx import { Link } from 'react-router-dom'; export default function Links() { return ( Home Profile Profile/1 About About?name=msko ); } NavLink Component import {..
-
React - Router Switch & NotFound ComponentReact/Router 2021. 6. 5. 19:21
Switch Component 여러 Route 중 순서대로 일치하는 하나만 노출시킴 exact를 뺄 수 있는 로직 구현 가능 가장 마지막에 어떠한 path도 일치하지 않으면 보여주는 Not Found 컴포넌트 설정 범위가 가장 작은 컴포넌트를 위에 배치 // App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Profile from './pages/Profile'; import NotFound from './pages/NotFound'; function App() { return ( ); }
-
React - Dynamic RoutingReact/Router 2021. 6. 5. 18:51
동적 라우팅 설정 1 Route path에 /:{key} key 값 가져오기 해당 컴포넌트에서 props.match.params.[key] // App.js function App() { return ( ); } // Profile.jsx export default function Profile(props) { const id = props.match.params.id; console.log(id, typeof id); return ( Profile 페이지입니다. {id && id는 {id}입니다.} ); } 동적 라우팅 설정 2 query string npm i query-string /about?name=msko 호출 시, 아래와 같이 처리 // About.jsx import queryString f..
-
React - Router RoutingReact/Router 2021. 6. 5. 17:11
https://reactrouter.com/ React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com SPA 라우팅 과정 브라우저에서 최초에 '/' 경로 요청 서버에서 React Web App 전체를 내려줌 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌 React App 에서 다른 페이지로 이동하는 동작을 수행하면, 새로운 경로에 맞는 컴포넌트를 보여줌 React Router 설치 npm i react-router-dom CRA에 기본 내장된 패키지가 아니므로 별도로 설치 필요 react-router-dom은 Facebook의 공식 패키지가 아님 가장 대표적인 라우팅 패키지 React ..