I’m using compose from recompose.
compose
// compose: https://github.com/acdlite/recompose/blob/master/docs/API.md#compose
export function compose<TInner, TOutter>(
...functions: Function[]
): ComponentEnhancer<TInner, TOutter>;
// export function compose<TOutter>(
// ...functions: Array<Function>
// ): ComponentEnhancer<any, TOutter>;
// export function compose(
// ...functions: Array<Function>
// ): ComponentEnhancer<any, any>;
My component is being rendered inside of a Route
OperatingCompany/index.tsx
<Routes>
<Route path={'create'} element={<CreateOperatingCompanyContainer />} />
<Route path={':id'} element={<OperatingCompanyDetailsContainer />} />
<Route index element={<OperatingCompanyListContainer />} /> <------------ Here it is
</Routes>
I have a HOC that I use to add navigate, location, and params to a component and a type that I use to add checking to the component
WithRouter/index.tsx
import { useNavigate, useLocation, useParams, Params, NavigateFunction } from 'react-router';
export type WithRouterProps<P = Params> = { <----- WithRouterProps
navigate: NavigateFunction;
location: Location;
params: P;
};
export const withRouter = (Component) => { <------ withRouter
const Wrapper = (props) => {
const navigate = useNavigate();
const location = useLocation();
const params = useParams();
return <Component location={location} params={params} navigate={navigate} {...props} />;
};
return Wrapper;
};
The OperatingListContainer component is being exported using compose, and has “ChildProps” for the TInner type argument with includes WithRouterProps
These are the last several lines of OperatingListContainer
type ExternalProps = any;
type ChildProps = QueryOperatingCompaniesChildProps & WithRouterProps;
export default compose<ChildProps, ExternalProps>(queryOperatingCompanies)(
OperatingCompanyListContainer
);
These are the last several lines of queryOperatingCompanies
export function queryOperatingCompanies<P>(
Component: React.ComponentType<P & {}>,
): React.ComponentType<P & {}> {
return compose(queryOperatingCompaniesGraphql, renderWhileLoading())(Component);
}
My question is: why is it that typescript does not complain that I haven’t wrapped the OperatingCompanyListContainer component using withRouter even though I’ve specified in the compose function that TInner should include WithRouterProps?
If I add WithRouterProps as part of TOutter typescript will tell me I’ve neglected to pass location, navigate, and params to the component but it’s remains silent if WithRouterProps is in TInner and I’ve not used withRouter HOC to pass them. It’s my understanding that TOutter are supposed to be props that are passed manually after all of the HOC’s have been applied and TInner are props that should be passed via the HOC’s themselves.