为什么当我尝试在我的功能组件中使用来自道具 object 的匹配参数时它会失败？

Question

It works fine this way when I use 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);

But when I add Flow type checking (I'm almost entirely sure I'm doing it right), it logs the error.

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);

The error looks this way:

Uncaught RuntimeTypeError: Props.match must be an object

Expected: {
  url: string;
}

Actual Value: undefined

Actual Type: void

Answer 1

Apparently, I passed all props from the parent component.

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

I guess this is not a good practice to name the props in the same way.

So I made a little change and it got easier to figure out how to receive necessary properties from incoming props object.

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