React router v6 with Redux Connect function and TS

[PixeIPerfect]

Hi all.
I've started migrating from react router V5 to V6 using react-router-dom-v5-compat lib.
I use Redux with Connect HOC and Typescript as well.

So far the migration looks good, components are rendering but I got some Typescript errors when using React element in Route's 'element' property:

<Route path={routes.receipt.path} element={<Receipt /> />
the error:
Property 'isComplete' is missing in type '{}' but required in type 'ReduxProps'.

connect.ts:

const mapStateToProps: MapStateToProps<ReduxProps, ReceiptProps, State> = (state) => ({
    isComplete: receiptSelectors.getIsComplete(state),
    product: receiptSelectors.getProduct(state),
});

export const Receipt = connect(mapStateToProps)(ReceiptComponent);

receipt.tsx:

export interface ReduxProps {
    isComplete: boolean;
    product?: Product;
}

export type ReceiptProps = ReduxProps;

const Receipt: FunctionComponent<ReceiptProps> = ({ isComplete, product }) => {
    const { translate } = useTranslate();
    const navigate = useNavigate();
    const location = useLocation();

return (<div>...</div>);
};

export { Receipt };

index.ts:
export { Receipt } from './connect';

If I use Component={WithdrawalReceipt} I get another TS error as well.

[sergiodxa]

Seems like your Receipt components expects some props, and while the connect HOC is passing them is not removing them from the types, that's why when you render the component in the route element it complains for the missing props.

[PixeIPerfect]

I realize the root of the issue and looking forwatd to find the best possible solution to it. I could write a wrapper around my components but I really don't want to do that as I hope there are simplier solutions.

[elawad]

Hi, we faced the same issue when migrating to Router v6 while using Redux connect.
A solution that worked for us was to wrap every class component that was exported with connect to use a withRouter custom HOC.

This does require updating all the connect components to use the Router props from the HOC.
But it eliminated any type errors with Router+connect. Until we migrate all class components to use hooks.

// withRouter.tsx HOC
import { useLocation, useNavigate, useParams } from 'react-router-dom';

type WithRouterProps = {
  location: ReturnType<typeof useLocation>;
  navigate: ReturnType<typeof useNavigate>;
  params: ReturnType<typeof useParams>;
};

/** ---
@deprecated Use React Router hooks instead.
--- */
function withRouter<Props extends WithRouterProps>(
  Component: React.ComponentType<Props>
) {
  function ComponentWithRouterProps(props: Omit<Props, keyof WithRouterProps>) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();

    return (
      <Component
        {...(props as Props)}
        location={location}
        navigate={navigate}
        params={params}
      />
    );
  }

  return ComponentWithRouterProps;
}

export default withRouter;

// App.tsx Class Component (or .jsx)
const AppConnect = connect(mapStateToProps)(App);
export default withRouter(AppConnect);

{
  // Package Versions
  "@reduxjs/toolkit": "^2.2.3",
  "react-redux": "^9.1.1",
  "react-router-dom": "^6.26.1"
}