outer(match, location)
1. match
URL 파라미터를 사용할 때
ex) localhost:3000/profile/hemtory
console
isExact: true
params: {username: "hemtory"}
path: "/profiles/:username"
url: "/profiles/hemtory"
import React from 'react';
const data = {
hemtory: {
name: '햄토리',
info: '리액트'
},
lhh: {
name: '이호현',
info: '난섬세하다고'
}
};
const Profile = ({ match }) => {
const { username } = match.params;
const profile = data[username];
if(!profile) {
return <div>존재하지 않는 사용자</div>
}
return (
<div>
<h3>{username}({profile.name})</h3>
<p>{profile.info}</p>
</div>
);
};
export default Profile;
match 객체에서 param을 확인해보면 username에 파라미터를 저장하도록 되어있다. param을 이용해서 url에 있는 파라미터값을 이용할 수 있다.
2. location
URL 쿼리를 사용할 때
console
hash: ""
pathname: "/about"
search: "?detail=true"
state: undefined
import React from 'react';
import qs from 'qs';
const About = ({location}) => {
const query = qs.parse(location.search, {
ignoreQueryPrefix: true
});
const detail = query.detail === 'true';
return (
<div>
<h1>소개</h1>
<p>어바웃입니다.</p>
{detail && <p>detail값이 true 입니다</p>}
</div>
);
};
export default About;
location 객체에서 search 확인해보면 "?detail=true" 이렇게 querystring
을 받아올 수 있다.
ignoreQueryPrefix: true
을 사용하면 querystring
에서 ?
를 무시할 수 있다.
Author And Source
이 문제에 관하여(outer(match, location)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hemtory/ReactRouter
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
URL 파라미터를 사용할 때
ex) localhost:3000/profile/hemtory
console
isExact: true
params: {username: "hemtory"}
path: "/profiles/:username"
url: "/profiles/hemtory"
import React from 'react';
const data = {
hemtory: {
name: '햄토리',
info: '리액트'
},
lhh: {
name: '이호현',
info: '난섬세하다고'
}
};
const Profile = ({ match }) => {
const { username } = match.params;
const profile = data[username];
if(!profile) {
return <div>존재하지 않는 사용자</div>
}
return (
<div>
<h3>{username}({profile.name})</h3>
<p>{profile.info}</p>
</div>
);
};
export default Profile;
match 객체에서 param을 확인해보면 username에 파라미터를 저장하도록 되어있다. param을 이용해서 url에 있는 파라미터값을 이용할 수 있다.
URL 쿼리를 사용할 때
console
hash: ""
pathname: "/about"
search: "?detail=true"
state: undefinedimport React from 'react'; import qs from 'qs'; const About = ({location}) => { const query = qs.parse(location.search, { ignoreQueryPrefix: true }); const detail = query.detail === 'true'; return ( <div> <h1>소개</h1> <p>어바웃입니다.</p> {detail && <p>detail값이 true 입니다</p>} </div> ); }; export default About;
location 객체에서 search 확인해보면 "?detail=true" 이렇게
querystring
을 받아올 수 있다.
ignoreQueryPrefix: true
을 사용하면querystring
에서?
를 무시할 수 있다.
Author And Source
이 문제에 관하여(outer(match, location)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hemtory/ReactRouter저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)