React route render attribute type challenge typescript

RouteComponentProps

You are so close! The S argument of RouteComponentProps controls the state type for both the location and the history props, so that is what you want to use.

The mistake is that you are setting S to IFirebaseProject which means that the state is itself an IFirebaseProject. But in reality the state looks like {project}. It is an object with a key project that has a value of IFirebaseProject. So the correct type for S is {project: IFirebaseProject}.

With all of the types properly set, it is this:

render={({ location }: RouteComponentProps<{id: string}, StaticContext, {project: IFirebaseProject}>)  => {

But location doesn't use those other two generics, so this is fine:

render={({ location }: RouteComponentProps<any, any, {project: IFirebaseProject}>)  => {

Location

Personally I would just declare a type for the location property since that is the only property of the RouteComponentProps that you actually need. I don't like using types which rely on generics that aren't used.

The underlying Location type comes from the history package which is a dependency of react-router. Its types are imported into the react-router-dom types with import * as H from "history", so that's why you see H.Location. But you can import it directly:

import {Location} from "history";

And use it like this:

render={({ location }: {location: Location<{project: IFirebaseProject}>})  => {

Typescript Playground Link

Edit: render vs. component

There is something strange going on in your CodeSandbox as I do see the error but I cannot reproduce it in isolation in the TS Playground. Rather than banging our heads against the wall let's just use a slightly different approach that circumvents the error.

The component prop has a much more permissive type than render because it allows the props type to be either RouteComponentProps<any> (what we expect) or any (literally anything). Just switching the prop name from render to component makes it suddenly work! We don't want to define a component inline because it will be recreated on each render, but we can define it externally.

We will now use the component prop for the Route instead of using a render function:

<Route path="/project/:id" component={ProjectScreen} />

There are two options for accessing the location in ProjectScreen which both seem to work for me.

1. We can access it through the injected props in the component. This is exactly what we had before, but it is allowed on component and not render due to the any type on the props.

const ProjectScreen = ({ location }: { location: Location<{ project: IFirebaseProject }>; }) => {
  const { state } = location;
  return <ProjectDetails project={state.project} />;
};

2. We can access it through the router context by using the useLocation hook. This hook is generic depending on state, so we can specify the state type when we call it. We define a component that takes no props but renders the appropriate ProjectDetails based on the location from the hook.

const ProjectScreen = () => {
  const { state } = useLocation<{ project: IFirebaseProject }>();
  return <ProjectDetails project={state.project} />;
}

The RouteProps type is as follows:

export interface RouteProps {
    location?: H.Location;
    component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
    render?: (props: RouteComponentProps<any>) => React.ReactNode;
    children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
    path?: string | string[];
    exact?: boolean;
    sensitive?: boolean;
    strict?: boolean;
}

As the render attribute only defines the first argument, of RouteChildrenProps the other two that are not defined in its type are the default ones. StaticContext for the second argument C, and for the third argument S, following down the type H.LocationState it ends up in unknown. Below the RouteComponentProps to follow this explanation:

export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
> {
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C;
}

The fix is to define the 3 possible arguments the render attribute can take in RouteProps like this: render?: (props: RouteComponentProps<any,any,any>) => React.ReactNode;, so that the second and third arguments of RouteComponentProps are not forced to their respective defaults.

This explains that type kind of being 'forced' in the render attribute, and the error I always obtained: RouteComponentProps<any, StaticContext, unknown>' is not assignable to ...

I am not that confident to assure that types are not correct in an external library, as I am not very experienced neither with react nor typescript, so would gladly hear any comment/caveat regarding this topic.