為什么當我嘗試在我的功能組件中使用來自道具 object 的匹配參數時它會失敗？

Question

當我使用props.match.url時，它可以正常工作。

import {withTranslation} from 'react-i18next';

function Navbar ({props}) {
    return (
        <nav className={css.navbar}>
            <NavLink exact to={`${props.match.url}`} className={css.link} activeClassName={css.linkActive}>
                Calls receive scenario
            </NavLink>
            <NavLink to={`${props.match.url}/call-tracking`} className={css.link} activeClassName={css.linkActive}>
                Tracked numbers
            </NavLink>
            <NavLink to={`${props.match.url}/greetings`} className={css.link} activeClassName={css.linkActive}>
                Greetings
            </NavLink>
            <NavLink to={`${props.match.url}/sip`} className={css.link} activeClassName={css.linkActive}>
                Sip accounts
            </NavLink>
        </nav>);
}

export default withTranslation()(Navbar);

但是當我添加流類型檢查（我幾乎完全確定我做對了）時，它會記錄錯誤。

import {withTranslation} from 'react-i18next';

type Props = {
    t: Function,
    match: {
        url: string
    }
}

function Navbar({t, match}: Props) {
    return (
        <nav className={css.navbar}>
            <NavLink exact to={`${match.url}`} className={css.link} activeClassName={css.linkActive}>
                {t('settings.page_vats.page_scenario.navbar_title')}
            </NavLink>
            <NavLink to={`${match.url}/call-tracking`} className={css.link} activeClassName={css.linkActive}>
                Tracked numbers
            </NavLink>
            <NavLink to={`${match.url}/greetings`} className={css.link} activeClassName={css.linkActive}>
                Greetings
            </NavLink>
            <NavLink to={`${match.url}/sip`} className={css.link} activeClassName={css.linkActive}>
                Sip accounts
            </NavLink>
        </nav>);
}

export default withTranslation()(Navbar);

錯誤看起來是這樣的：

Uncaught RuntimeTypeError: Props.match must be an object

Expected: {
  url: string;
}

Actual Value: undefined

Actual Type: void

Answer 1

顯然，我從父組件傳遞了所有道具。

function ParentComponent (props) {
    return (
        <>
            <Navbar props={props} />
            <Routes props={props} />
        </>
    );
}

我想以同樣的方式命名道具並不是一個好習慣。

所以我做了一點改變，更容易弄清楚如何從傳入的道具 object 接收必要的屬性。

function ParentComponent (props) {
    return (
        <>
            <Navbar parentComponent={props} />
            <Routes parentComponent={props} />
        </>
    );
}