탐색경로는 사용자에게 웹페이지 내 현재 위치를 추적할 수 있는 방법을 제공하고 웹페이지 탐색을 지원하므로 웹페이지 개발에 중요합니다.
이 가이드에서는 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;
}
|
로그인 후 복사
그럼 경로를 선언해 보겠습니다.
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 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!