[REACT] react-router-dom / react router

설치

yarn add react-router-dom

사용

BrowserRouter라는 컴포넌트 HTML5의 API를 이용하여 페이지를 새로고침 하지 않고도 주소를 변경 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다.

실습

1. index.js를 다음과 같이 수정한다.

import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , document.getElementById('root'));

2. 두 js 페이지를 만든다.

Home.js / About.js

// App.js import React from 'react'; import { Route } from "react-router-dom"; import About from "./About"; import Home from "./Home"; const App = () => { return ( ) } export default App;

오류 수정

이렇게 되면 "/"와 "/about"의 경로가 겹쳐서 같이 나온다.

exact 속성을 추가한다.

Link 사용

a 태그를 사용하면 페이지를 새로 로드해서 기존의 정보가 모두 초기화된다.

따라서 Link 태그를 사용한다.

to 라는 속성을 사용하고, 만들어둔 Route 태그는 놔둔다.

const App = () => { return ( 홈 About ) }

Route 하나에 여러개의 path 설정하기

기존

업데이트 이후

꼭 배열로 써야한다.

주소가 info인데도 about 화면으로 이동해있다

URL 파라미터 / 쿼리

파라미터 : /about /me

쿼리 : /about?phone=01011112222

URL 파라미터

파라미터로 쓸 부분에 /:파라미터 로 사용한다.

const App = () => { return ( 홈 About A Profile B Profile ) }

다음과 같이 사용할 수 있다.

import React from "react"; const data = { a: { name: "A", desc: "용의자 A씨" }, b: { name: "B", desc: "용의자 B씨" } }; const Profile = ({ match }) => { const { username } = match.params; const profile = data[username]; if(!profile){ return 존재하지 않는 용의자; } return ( { username }({profile.name}) {profile.desc} ) } export default Profile;

쿼리

콘솔에 location을 쳤을 때, search 부분이다.

http://localhost:3000/about?me

http://localhost:3000/about?me=lee&age;=98&tall;=280

search 부분을 나누어주려면

yarn add qs

qs 라는 라이브러리를 사용합니다.

import React from "react"; import qs from "qs"; const About = ({ location }) => { const query = qs.parse(location.search,{ ignoreQueryPrefix: true // 쿼리 맨 앞의 ? 무시 }); const showMe = (query.me === "lee"); return ( 어바웃 어바웃 화면 {showMe && 저는 Lee입니다.} ) } export default About;

-- 서브 라우트 --

from http://emessell.tistory.com/128 by ccl(A)