React使用路由嵌套+react-redux+hook时，获取不到props

背景：

使用路由嵌套加载路由

使用react-redux和hook管理组件

问题：

当路由跳转到该模块时，定义的props参数无法获取到

export default function RouterLayoutConfigAddComponent(props: RouterLayoutConfigAddProps) {
    const {RouterLayoutConfigAddOnDragEnd} = props;
    return (
        <Provider store={RouterLayoutReducers}>
            <DragDropContext onDragEnd={RouterLayoutConfigAddOnDragEnd}
                             key="DragDropContext">
                <Row gutter={0}>
                    <Col span={4} className="center-layout-col"
                         key={`RouterDashboardDeom-list-col-${1}`}>
                        <RouterLayoutConfigAddLeft/>
                    </Col>
                    <Col span={20} className="center-layout-col"
                         key={`RouterDashboardDeom-list-col-${2}`}>
                        <RouterLayoutConfigAddRight/>
                    </Col>
                </Row>
            </DragDropContext></Provider>
    )
}

问题原因：

在路由嵌套时，使用了高级组件RouteWithSubRoutes进行了处理，应该是将props覆盖了。

export const RouteWithSubRoutes = function (route: any) {
    return (
        <Route
            path={route.path}
            exact={!!route.exact}
            render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.children} />
            )}
        />
    );
}

修改方案：

1、重新定义一个空组件，加载之前的组件。

export default function RouterLayoutConfigAdd(props: any) {
    return (<RouterLayoutConfigAddPage/>)
}

2、此时报错，报错信息为：

Could not find "store" in the context of "Connect(RouterLayoutConfigAddComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(RouterLayoutConfigAddComponent) in connect options.

3、根据报错信息将1、Provider提升，解决该问题

export default function RouterLayoutConfigAdd(props: any) {
    return (<Provider store={RouterLayoutReducers}><RouterLayoutConfigAddPage/></Provider>)
}