javascript - シンプルなボタン コンポーネントが変数を受け入れない

Question

コードを見直し、よりモジュール化して堅牢にする際に、プログラマなら誰しもそうであるように、同じようなボタン コンポーネントを何度も使用していることに気付きました。そのため、ボタン コンポーネントを作成し、レンダリングされたページのように、新しいルート リンクとテキストを使用してレンダリングすることにしました。

私は、かなり精通したプログラミングのバックグラウンドを持っており、反応するのはまったく初めてです（学習で〜5日）。

シンプルなコンポーネント ボタン。私は react-route-dom : Link prop を使用して新しいページにルーティングします。

function ActionButton () {
    return (
        <div className="Action">
            <button className="ActionButton">
                <Link to={this.props.navLink}> 
                    {this.props.text} 
                </Link> 
            </button>
        </div>
    );
}

ボタン コンポーネントの使用/構築

function ActionPage () {
    return (
        <div className="ActionPage">
            <ActionButton
                navLink="/urlLink1"
                text="btn1"
            />
            <ActionButton
                navLink="/urlLink2"
                text="btn2"
            />
        </div>
    );
}

これは機能しません。次のようになります。

TypeError: 未定義のプロパティ 'props' を読み取れません