TIL - React Router 2: 동적 URL 매개변수

URL 매개변수는 값이 페이지의 URL에서 동적으로 설정되는 매개변수입니다. 이렇게 하면 경로가 동일한 구성 요소(UI)를 렌더링하는 동시에 해당 구성 요소를 URL의 동적 부분에 전달하여 이를 기반으로 변경할 수 있습니다.

만들기 <Route>

 <Route path="/user-profile/:tool/:name" component={UserProfile} />

경로의 :tool 및 :name 부분은 가변 매개변수로 간주됩니다.

<Link>를 다음으로 설정합니다.

             <li>
              <Link to="/user-profile/Github/Leonor">Leonor Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Github/Diana">Diana Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Leonor">Leonor Sandbox</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Diana">Diana Sandbox</Link>
            </li>

React Router는 경로의 모양을 비교하고 올바른 것을 선택합니다.

params 객체의 값 가져오기

React Router v4가 구성 요소를 렌더링할 때마다 해당 구성 요소에 일치, 위치 및 기록이라는 세 가지 소품을 전달합니다.

url은 주소 표시줄의 실제 상대 경로입니다./Codesandbox/Diana

경로는 이름에서 알 수 있듯이 일치하는 경로의 경로입니다./:tool/:name

isExact는 정확히 일치하는지 여부를 나타내는 부울입니다. 실제 경로에는 경로 속성만큼 많은 세그먼트가 있기 때문에 여기서는 사실입니다. 현재 URL이/Codesandbox/Diana/Surname이면 경로가 활성화되지만 isExact는 false입니다.

params는 개체입니다. 펼치면 URL 매개변수(id)를 match.params의 속성으로 가져올 수 있습니다.

const params = props.match.params;
      <h2>
        {params.name}s {params.tool} Profile
      </h2>

useParams 후크

useParams는 URL 매개변수의 키/값 쌍 객체를 반환합니다. 이를 사용하여 현재<Route>의 match.params에 액세스합니다.

const About = () => {
  const { name } = useParams()

return (
  // props.match.params.name
  <>
     <h1>About {name}</h1>
  </>
)
};

URL 매개변수 사용

PostList.js에서 다음 가짜 블로그 게시물 목록을 가져오기 바로 아래에 추가합니다.

const allPosts = [
  { year: '2019', month: '09', title: 'React Router v5.1 released' },
  { year: '2019', month: '09', title: 'React 16.10.0 released' },
  { year: '2019', month: '10', title: 'React Conf 2019' },
  { year: '2019', month: '10', title: 'Transition of Node.js 12 to LTS' }
];

그런 다음 구성 요소의 내용을 모두 바꿉니다.

function PostList(props) {
  // Get the URL parameters
  const params = props.match.params;
  // Filter allPosts array: keep posts who have the
  // same month AND same year as the URL parameters
  const filteredPosts = allPosts.filter(
    post => post.year === params.year && post.month === params.month
  );
  return (
    <div>
      <h2>Posts for {params.month}/{params.year}</h2>
      {
        filteredPosts.map(post => (
          <h3>{post.title}</h3>
        ))
      }
    </div>
  );
}

모든 게시물에 적용하는 필터가 가장 흥미로운 부분입니다. 필터는 모든 게시물을 반복합니다. "기준", 즉 매개 변수로 제공된 기능은 각 게시물이 다음 조건을 준수하는지 확인합니다. 게시물의 연도 및 월이 URL의 연도 및 월과 일치합니까? 그렇다면 게시물 개체가 유지되고 FilteredPosts에 표시됩니다.

마지막으로 일치하는 게시물의 제목을 표시하기 위해 FilteredPosts에 맵을 적용합니다.