Question

我使用"react-router": "4.3.1"和"styled-components": "4.1.3"收到以下警告

index.js:2178 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (created by Routes)
    in Routes (created by Route)
    in Route (created by withRouter(Routes))
    in withRouter(Routes) (created by App)
    in div (created by App)
    in App (created by Route)
    in Route (created by withRouter(App))
    in withRouter(App) (created by StartPage)
    in div (created by ScrollToTop)
    in ScrollToTop (created by Route)
    in Route (created by withRouter(ScrollToTop))
    in withRouter(ScrollToTop) (created by StartPage)
    in ThemeProvider (created by StartPage)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by StartPage)
    in Provider (created by StartPage)
    in StartPage

这是我的Routes类（删除了不相关的部分）：

interface RoutesProps extends RouteComponentProps<{}> {
}

class Routes extends React.Component<RoutesProps, {}> {
    public render() {
        return (
            <Switch>
                <Route path="/otii/standard" component={OtiiStandard} />
            </Switch>
        );
    }
}
export default withRouter(Routes);

这是OtiiStandard类（同样，删除了大部分不相关的部分）：

import * as React from 'react';
import styled, { withTheme } from 'styled-components';

interface OtiiStandardProps {
    // tslint:disable-next-line:no-any
    theme: any;
}

const ImageContainer = styled.div`
    max-width: 150px;
    margin-bottom: 15px;
`;

const Center = styled.div`
    text-align: center;
`;

const SectionContainer2 = styled(SectionContainer)`
    margin-top: 38px;
`;

// tslint:disable:max-line-length

const OtiiStandard = (props: OtiiStandardProps) => {
    return (
        <>
            <Center>
                ....
            </Center>
        </>
    );
};

export default withTheme(OtiiStandard);

我可以通过两种不同的方式获得警告：

A）

将路线更改为：

<Route path="/otii/standard" component={() => <OtiiStandard/>} />

B）

请勿将OtiiStandard与主题一起包装

export default OtiiStandard;

问题

为什么会出现此警告？我还有许多其他组件以相同的方式编写，也被withTheme包裹了，这些组件不会引起警告？
我可以将路由更改为<Route path="/otii/standard" component={() => <OtiiStandard/>} />吗？或者我的代码似乎有问题吗？

将主题包装的组件传递给Route时，为什么要警告？

0 个答案: