My component has props named project which are passed through a Link to a Route. Here's how it looks (the project object goes in the state extended property):
<Link
to={{
pathname: path,
state: {
project,
},
}}
key={project.id}
>
<ProjectSummary project={project} deleteCallback={projectDelete}/>
</Link>
Once this data is received in the route, it can be further passed to the linked component like so:
<Route
path='/project/:id'
render={({ location }:any) => { //TYPE CHALLENGE HERE
const { state } = location;
return <ProjectDetails project={state.project} />
}}
/>
The challenge arises when trying to find the appropriate type for the any with the comment //TYPE CHALLENGE HERE. I've experimented with various types from 'react-router' and 'react-router-dom', but haven't been able to identify an exact match.
The closest relevant interface seems to be:
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;
}
This interface provides all the route params to the component, but I specifically extend the location where my project object is included. For reference, here is the type of the project object being passed in:
export interface IFirebaseProject {
id: string,
authorFirstName: string,
authorId: string,
authorLastName: string
content: string
createdAt: firebase.firestore.Timestamp //firebase timestamp
title: string
}
Additionally, I am encountering an error with the following attempt:
render={({ location }:RouteComponentProps<any, StaticContext, IFirebaseProject>) => {}
No overload matches this call.
Overload 1 of 2, '(props: RouteProps | Readonly<RouteProps>): Route<RouteProps>', gave the following error...
Updated information about the log error can be found in the screenshot below:
Error message related to the render function:
Full error details with the updated
render={({ location }: { location: Location<{ project: IFirebaseProject }> }) => {No overload matches this call.
Overload 1 of 2, '(props: RouteProps | Readonly<RouteProps>): Route<RouteProps>', gave the following error...