Почему предупреждение при передаче обернутого компонента с Theme в Route? - PullRequest
Новая
       24

Почему предупреждение при передаче обернутого компонента с Theme в Route?

0 голосов
/ 22 февраля 2019

Я получаю следующее предупреждение, используя "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 с withTheme 

export default OtiiStandard;

Вопросы

  • Почему появляется это предупреждение?У меня есть много других компонентов, которые я написал таким же образом, которые также обернуты withTheme, которые не вызывают предупреждений?
  • Хорошо ли я меняю маршрут на <Route path="/otii/standard" component={() => <OtiiStandard/>} /> или мой код, кажется, имеетесть проблемы?
...