Question

我有这段代码：

...
import { match, RouteComponentProps } from "react-router";
import * as H from 'history';

interface oneRoute {
    path: string;
    exact?: boolean;
    main: any;
}

interface ITestProps {
    id: string;
}

class Test extends React.Component<RouteComponentProps<ITestProps>, {}> {
    public render() {
        return <div>Hallow id:{this.props.match.params.id} -- {JSON.stringify(this.props.match)}</div>
    }
} 

export const routesData: oneRoute[] = [
    {
        path: '/',
        exact: true,
        main: (match: match<any>, location: H.Location, history: H.History) => <Home match={match} location={location} history={history} />
    },

    {
        path: '/test/:id',
        exact: false,
        main: (match: match<ITestProps>, location: H.Location, history: H.History) => <Test match={match} location={location} history={history} />
    }
]

export const routes = <Layout>
    {
    routesData.map((route, index) => {
        return <Route exact={route.exact} key={index} path={route.path} component={route.main} />;
    })
}    
</Layout>;

我在测试链接“/ test / 12”时出错。

未捕获的TypeError：无法读取未定义的属性“id”。

如果我对this.props.match.params.id发表评论，则JSON.stringify(this.props.match)会显示"match":{"path":"/test/:id","url":"/test/12","isExact":true,"params":{"id":"12"}}，因此会params.id。怎么可能，以及如何解决问题以获得this.props.match.params.id？

Answer 1

您在此处进行设置的方式是，组件Test会获得一个名为match的参数，该参数上具有称为match的属性您想要的对象（this.props.match.match.params.id。

您告诉Route，要渲染的component是：

(match: match<ITestProps>, location: H.Location, history: H.History) => <Test match={match} location={location} history={history} />

仅通过一个参数调用组件，这是一个props对象。在运行时，此处的变量match不是match<ITestProps>，而是整个RouteComponentProps对象。

设置component={route.main}时，Typescript不会警告您，因为route.main的类型为any，因此假定它是兼容的。

在界面中更具体

interface oneRoute {
    path: string;
    exact?: boolean;
    main: React.ComponentType<RouteComponentProps<any>>;
}

您本来可以使用main来分解属性match，location和history并将其传递给组件的函数，但是实际上没有意义没有改变任何道具。 main可以只是组件本身。

export const routesData: oneRoute[] = [
    {
        path: '/',
        exact: true,
        main: Home,
    },
    {
        path: '/test/:id',
        exact: false,
        main: Test,
    }
]

如何在React Typescript中绑定匹配？

1 个答案: