あなたの反応アプリで動的なバックボタン

今日、私は私のURL短縮剤反応とノード・アプリに取り組んでいました.私は私が管理者パネルを構築しているステージにいます、そこで、私はユーザーを承認することができます.私はこれらのコンポーネントのそれぞれに戻るボタンをコーディングしているのを見つけたので、どのようにしてドライヤーコードを書くことができましたか?
例えば、誰かがいるなら/admin/approveusers 戻るボタンをユーザーにもたらす/admin . 同じボタンを、コンポーネントの中に座って配置/admin/allusers 人々をもたらす/admin .
私はRummageを始めましたreact-router-dom プロパティーlocation , history , match . 私は、既存のパスマイナスレベルを含むプロパティを見つけませんでした.多分、私はそれを逃しました、あるいは、確かに、それは存在しません.があるgoBack() おもしろかった歴史の方法.しかし、それは悪い考えのように見えました-ユーザが親ボタンによって戻るボタンを持っているコンポーネントを入力すると予想しても、直接URLを入力した結果、誰かがコンポーネントで終わるかもしれません.その場合、バックボタンgoBack() 歴史の方法は混乱を引き起こします.
私はオンラインで多くの研究をしませんでした、そして、以下で解決しました.多分それはハックです、多分、それは多分最高の実行です、多分、それは恐ろしいです、コメントで私に知らせてください!これは、どのような日の終わりに事項です.
私は、使用していますmatch.path react-router-dom プロパティには、コンポーネントのパスが含まれます./admin/active . こうすると次のようになります.

弦を割った/ . その結果、配列を取得します.

最後のアイテムを見つけます.

私は配列を繰り返して、私が欲しくないアイテムを濾過します.使用.filter . 私は別の配列を取得します.

私は'/'とVoilを使って配列に参加します.私は' admin/アクティブ'の代わりに'/admin 'のパスを1つのレベルにします.

コンポーネントを参照ください.

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;

編集03/10/2020
どうすればBackButton パスの最上位のコンポーネント/ )? その場合、1つのレベルまで戻ることはありません.コンポーネントをリファクタリングします.

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 prop (親コンポーネントで定義している)destination='login' . 私はその目的地を収集しmatch.path === '/' . その場合、私はセットparentPath to /${destination} そして、リンクのテキストはdestination 大文字で最初の文字と小文字.