React Router v6을 사용하여 React에서 탐색경로 구현

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

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

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

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

설정 중

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

npm 설치 반응 라우터-dom

또는 실을 사용하는 대안:

원사에 React-Router-dom 추가

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

npm 설치 부트스트랩

구성 요소 구현

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

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

 <div className='text-primary'>
   <nav aria-label='breadcrumb'>
      <ol className='breadcrumb'>
        <li className='breadcrumb-item pointer'>
          <span className='bi bi-arrow-left-short me-1'></span>
            Back
        </li>
      </ol>
   </nav>
</div>

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

  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<IRoute[]>([]);

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

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 ? (
    <li className='breadcrumb-item'>{x.name}</li>
      ) : (
        <li className='breadcrumb-item'>
          <Link to={x.path} className=' text-decoration-none'>
            {x.name}
          </Link>
        </li>
      )
 )}

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

이제 전체 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 (
    

      

        

          

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

                
                  {x.name}
                
              
            )
          )}
        
      
    
  );
};
export default Breadcrumbs;

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

결론

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

유용한 링크

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

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

위 내용은 React Router v6을 사용하여 React에서 탐색경로 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!