이동 경로는 사용자에게 웹페이지 내 현재 위치를 추적할 수 있는 방법을 제공하고 웹페이지 탐색을 지원하므로 웹페이지 개발에 중요합니다.

이 가이드에서는 React-Router v6 및 Bootstrap을 사용하여 React에서 탐색경로를 구현합니다.

React-router v6은 웹페이지나 웹 앱 내에서 탐색하기 위해 React 및 React Native에서 사용되는 라우팅 라이브러리입니다.

우리 구현에서는 Typescript를 사용하지만 Javascript 기반 프로젝트에도 쉽게 사용할 수 있습니다.

설정

먼저 프로젝트에 React-router-dom이 아직 설치되지 않았다면 설치해 보겠습니다.

npm 설치 반응 라우터-dom

또는 원사를 사용하는 대안:

원사 반응 라우터 돔 추가

구성 요소 스타일을 지정하기 위해 부트스트랩도 설치해 보겠습니다.

npm 설치 부트스트랩

구성 요소 구현

그런 다음 이동 경로에 대한 마크업을 포함하고 루트 위치를 기준으로 현재 위치를 결정하는 데 필요한 논리도 포함하는 Breadcrumbs.tsx 구성 요소를 만듭니다.

구성요소에 대한 간단한 마크업을 추가하는 것부터 시작해 보겠습니다.

구성요소에는 현재 뒤로 버튼만 있습니다. 클릭하면 이전 페이지가 로드되도록 뒤로 버튼에 대한 간단한 구현을 추가해 보겠습니다.

  const goBack = () => {
    window.history.back();
  };

다음 단계는 matchRoutes 함수를 사용하여 현재 경로를 가져오고 변환을 적용하여 현재 경로와 관련된 모든 경로를 필터링하는 함수를 작성하는 것입니다.
matchRoute는 AgnosticRouteObject 유형의 객체 배열을 허용하고 AgnosticRouteMatch[] | null 여기서 T는 우리가 전달하는 객체의 유형입니다.
또한 주목해야 할 중요한 점은 객체에 path라는 속성이 포함되어야 한다는 것입니다.

먼저 경로에 대한 인터페이스를 선언하겠습니다.

export interface IRoute {
  name: string;
  path: string; //Important
}

그런 다음 경로를 선언해 보겠습니다.

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

useLocation 후크를 유지하는 변수와 탐색경로를 상태로 유지하는 변수도 선언합니다.

const location = useLocation();
const [crumbs, setCrumbs] = useState([]);

다음으로 함수를 구현해 보겠습니다.

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

여기에서는 먼저 현재 위치와 일치하는 모든 경로를 가져옵니다.
const allRoutes = matchRoutes(경로, 위치);

그런 다음 결과가 반환되었는지 빠르게 확인하고 첫 번째 결과를 가져옵니다.
const matchRoute = allRoutes ? allRoutes[0] : null;

다음으로 현재 경로와 일치하는 모든 경로를 필터링합니다.
경로.필터((x) => matchRoute.route.path.includes(x.path))

그런 다음 결과를 사용하여 경로에 매개변수가 있는지 확인한 다음 매개변수 값으로 동적 경로를 바꾸는 새 배열을 만들어 보겠습니다.

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

이렇게 하면 경로에서 /users/:id/edit로 경로를 선언하고 ID가 1로 전달되면 /users/1/edit를 얻게 됩니다.

다음으로, 위치가 변경될 때마다 실행되도록 useEffect에서 함수를 호출해 보겠습니다.

  useEffect(() => {
    getPaths();
  }, [location]);

이 작업이 완료되면 마크업에 부스러기를 사용할 수 있습니다.

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key   1 ? (
    

여기서 이름만 표시하는 마지막 부스러기를 제외하고 링크와 함께 모든 부스러기를 표시합니다.

이제 전체 BreadCrumbs.tsx 구성 요소가 생겼습니다.

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

export interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState([]);

  //   const routes = [{ path: '/members/:id' }];

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    

      
  );
};
export default Breadcrumbs;

그런 다음 애플리케이션의 모든 부분, 바람직하게는 레이아웃에서 구성 요소를 사용할 수 있습니다.

결론

우리는 탐색 및 UX를 개선하기 위해 앱에 추가할 수 있는 간단한 탐색경로 구성 요소를 구현하는 방법을 살펴보았습니다.

유용한 링크

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/genelating-an-automatic-breadcrumb-in-react-router-fed01af1fc3 이 게시물에서 영감을 얻었습니다.