React 앱의 동적 뒤로 버튼

오늘 저는 url-shortener React 및 Node 앱에서 작업했습니다. 나는 사용자를 승인하고 누가 등록했는지 등을 볼 수 있는 관리자 패널을 구축하는 단계에 있습니다. 이러한 각 페이지는 구성 요소이며 뒤로 버튼이 있습니다. 이러한 각 구성 요소에서 뒤로 버튼을 코딩하는 것을 발견했기 때문에 DRYer 코드를 작성하는 방법을 자문했습니다. DRYer 코드는 사용자에게 URL 경로의 페이지를 위로 보내는 동적 뒤로 버튼입니다.

예를 들어 누군가가 /admin/approveusers에 있는 경우 뒤로 버튼을 누르면 사용자가 /admin로 이동합니다. 동일한 버튼을 /admin/allusers에 있는 구성 요소에 배치하면 사람들이 /admin로 이동합니다.
react-router-dom 속성을 뒤지기 시작했습니다. location , history , match . 기존 경로에서 레벨을 뺀 값을 포함하는 속성을 찾지 못했습니다. 내가 놓쳤거나 실제로 존재하지 않을 수도 있습니다(시도해야 했습니다!). 역사상 흥미로운 goBack() 방법이 있습니다. 그러나 그것은 나쁜 생각처럼 보였습니다. 사용자가 부모 경로로 뒤로 버튼이 있는 Component를 입력할 것으로 예상하더라도 직접 url을 입력한 결과 누군가가 Component에 들어갈 수 있습니다. 이 경우 히스토리에서 goBack() 메소드를 사용하는 뒤로 버튼은 엉망이 될 것입니다.

나는 온라인으로 많은 조사를 하지 않았고, 다음과 같이 해결했습니다. 해킹일 수도 있고 모범 사례일 수도 있고 끔찍할 수도 있습니다. 댓글로 알려주세요! 그것은 일을 끝내고 중요한 것입니다.

구성 요소의 경로를 포함하는 match.path react-router-dom 속성을 사용하고 있습니다. 즉 /admin/active . 그것으로 나는 다음을 수행합니다.

문자열을 / 로 나눕니다. 결과적으로 배열을 얻습니다.

마지막 항목(제거하고 싶은 항목)을 찾습니다.

배열을 반복하고 원하지 않는 항목을 필터링합니다. 사용.filter . 다른 배열을 얻습니다.

배열을 '/'로 결합하고 짜잔, '/admin/active' 대신 '/admin'과 같이 한 단계 위로 경로를 얻습니다.

내 구성 요소 아래를 참조하십시오.

import React from 'react';
import { Link } from 'react-router-dom';

const BackButton = ({ match }) => {
    const arr = match.path.split('/');
    const currPage = arr[arr.length - 1];
    const parentPath = arr
        .filter((item) => {
            return item !== currPage;
        })
        .join('/');
    return <Link to={parentPath}>{`<-- Back`}</Link>;
};

export default BackButton;

2020년 3월 10일 편집

경로( BackButton )의 최상위 수준에서 / 구성 요소를 사용하면 어떻게 됩니까? 이 경우 다시 돌아갈 수 있는 레벨이 없습니다. 내 구성 요소를 다음과 같이 리팩토링했습니다.

import React from 'react';
import { Link } from 'react-router-dom';

const BackButton = ({ match, destination }) => {
    let parentPath;
    if (match.path === '/') {
        parentPath = `/${destination}`;
    } else {
        const arr = match.path.split('/');
        const currPage = arr[arr.length - 1];
        parentPath = arr
            .filter((item) => {
                return item !== currPage;
            })
            .join('/');
    }
    return (
        <Link to={parentPath}>
            {match.path === '/'
                ? `<-- ${destination.charAt(0).toUpperCase() + destination.slice(1)}`
                : '<-- Back'}
        </Link>
    );
};

export default BackButton;

destination 소품을 추가했습니다(부모 구성 요소, 즉 destination='login'에서 정의하고 있습니다. 해당 대상을 수집하고 match.path === '/'일 때 사용합니다. 이 경우 parentPath를 /${destination}로 설정하고 링크의 텍스트는 첫 글자가 대문자인 destination 소품에서 오는 문자열이 됩니다.