> 웹 프론트엔드 > JS 튜토리얼 > React Router v6을 사용하여 React에서 탐색경로 구현

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

Linda Hamilton
풀어 주다: 2024-09-29 06:18:01
원래의
424명이 탐색했습니다.

Implementing Breadcrumbs in React using React Router v6

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

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

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

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

설정 중

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

npm 설치 반응 라우터-dom

또는 실을 사용하는 대안:

원사에 React-Router-dom 추가

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

npm 설치 부트스트랩

구성 요소 구현

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

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

1

2

3

4

5

6

7

8

9

10

<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>

로그인 후 복사

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

1

2

3

const goBack = () => {

  window.history.back();

};

로그인 후 복사

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

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

1

2

3

4

export interface IRoute {

  name: string;

  path: string; //Important

}

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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 후크를 유지하는 변수와 탐색경로를 상태로 유지하는 변수도 선언합니다.

1

2

const location = useLocation();

const [crumbs, setCrumbs] = useState<IRoute[]>([]);

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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))

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

1

2

3

4

5

6

7

8

9

.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에서 함수를 호출해 보겠습니다.

1

2

3

useEffect(() => {

  getPaths();

}, [location]);

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

{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 구성 요소가 생겼습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

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

 

  //   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 (

    <div classname="">

      <nav aria-label="breadcrumb">

        <ol classname="breadcrumb">

          <li classname="breadcrumb-item pointer" onclick="{goBack}">

            <span classname="bi bi-arrow-left-short me-1"></span>

            Back

          </li>

          {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}

                 

              </li>

            )

          )}

        </ol>

      </nav>

    </div>

  );

};

export default Breadcrumbs;

</iroute[]>

로그인 후 복사

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

결론

탐색 및 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿