Typescript, React, strongly typing useHistory - reactjs

Question

I am sending my useHistory (react-router-dom) variable as a parameter to the employeee.service in which I use the "history.push" method with a state and a pathname. unfortunetaly I cannot seem to find out what the correct type would be. I used:
History<unknown>
History<Location>
but both do not seem to understand the state that I pass. Does anyone know how to strongly type this? any help much appreciated!
The create method in the service:
export const createEmployee = async (body: IEmployee, history: any) => {
try {
const employeesResponse = await fetch(`http://localhost:3000/employees`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
if (employeesResponse.status !== 201) {
const response: IHttpResponse = {
status: employeesResponse.status,
error: {message: employeesResponse.statusText},
data: {content: ''}
}
return response
}
const employeeResult: IEmployee[] = await employeesResponse.json();
const response: IHttpResponse = {
status: employeesResponse.status,
error: {message: ''},
data: {content: employeeResult}
}
history.push({
pathname: '/',
state: { detail: 'reload', response: response },
});
} catch (error) {
console.log('error while creating', error);
const response: IHttpResponse = {
status: error.status,
error: {message: error.statusText},
data: {content: ''}
}
return response;
}
}
the component using the service
import React, { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Button, Input, Label } from 'reactstrap';
import FormGroup from 'reactstrap/es/FormGroup';
import { yupResolver } from '#hookform/resolvers/yup';
import * as yup from 'yup';
import Select from 'react-select';
import { useHistory } from 'react-router-dom';
import { gendersList, statusList } from '../models/lists/formLists';
import { IOptionType } from '../models/IOptionType';
import { createEmployee } from '../services/employee.service';
import { IEmployee } from './../models/IEmployee';
export const AddEmployeeForm = () => {
const history = useHistory();
const [gender, setGender] = useState<IOptionType>({ label: gendersList[0].label, value: gendersList[0].value });
const [status, setStatus] = useState<IOptionType>({ label: statusList[0].label, value: statusList[0].value });
const validationSchema = yup.object().shape({
firstname: yup.string().required().min(2),
lastname: yup.string().required().min(2),
email: yup.string().email().required(),
status: yup.object().shape({
label: yup.string(),
value: yup.string(),
}),
gender: yup.object().shape({
label: yup.string(),
value: yup.string(),
}),
});
const {
handleSubmit,
control,
formState: { errors },
register,
} = useForm({
resolver: yupResolver(validationSchema),
});
const handleGenderChange = (option: IOptionType) => {
setGender({ label: option.label, value: option?.value });
};
const handleStatusChange = (option: IOptionType) => {
setStatus({ label: option.label, value: option?.value });
};
const onSubmit = async (data: any) => {
console.log('errors', errors);
const body: IEmployee = {
first_name: data.firstname,
last_name: data.lastname,
email: data.email,
gender: gender.value ? gender.value : '',
status: status.value ? status.value : '',
};
console.log('Data', body);
createEmployee(body, history);
};
return (
<div className="col-12">
<form onSubmit={handleSubmit(onSubmit)}>
<FormGroup>
<Label for="firstname">First name</Label>
{errors.firstname && <p className="text-danger error-message">{errors.firstname.message}</p>}
<Input {...register('firstname')} />
</FormGroup>
<FormGroup>
<Label for="lastname">Last name</Label>
{errors.lastname && <p className="text-danger error-message">{errors.lastname.message}</p>}
<Input {...register('lastname')} />
</FormGroup>
<FormGroup>
<Label for="email">Email</Label>
{errors.email && <p className="text-danger error-message">{errors.email.message}</p>}
<Input {...register('email')} />
</FormGroup>
<FormGroup>
<Label for="gender">Gender</Label>
<Controller
name="gender"
control={control}
render={({ field: { onChange, onBlur, value, ref } }) => (
<Select
options={gendersList}
onChange={(value) => handleGenderChange({ value: value?.value, label: value?.label })}
onBlur={onBlur}
defaultValue={gender}
selected={value}
/>
)}
/>
</FormGroup>
<FormGroup>
<Label for="status">Status</Label>
<Controller
name="status"
control={control}
render={({ field: { onChange, onBlur, value, ref } }) => (
<Select
options={statusList}
onChange={(value) => handleStatusChange({ value: value?.value, label: value?.label })}
onBlur={onBlur}
value={status}
selected={value}
/>
)}
/>
</FormGroup>
<Button type="submit">Submit</Button>
</form>
</div>
);
};

Answer 1

You may want to look at how RouterProps is defined. Maybe helpful.
import { useHistory, RouterProps } from 'react-router-dom';

Answer 2

You can achieve the this like so:
const history = useHistory<{ detail: string, response: IHttpResponse }>();
console.log(history.location.state.detail); // should log 'reload'

Answer 3

You can use the RouterChildContext to access the useHistory type.
const foo = (history: RouterChildContext['router']['history']) => {
history.push('/your-path');
}
This is from the react-router type declaration file:
// This is the type of the context object that will be passed down to all children of
// a `Router` component:
export interface RouterChildContext<Params extends { [K in keyof Params]?: string } = {}> {
router: {
history: H.History;
route: {
location: H.Location;
match: match<Params>;
};
};
}

Answer 4

My workaround is:
import { useHistory, useLocation } from "react-router-dom";
type THistory<T = unknown> = ReturnType<typeof useHistory<T>>
type TLocation<T = unknown> = ReturnType<typeof useLocation<T>>;
const goTo = (history: THistory<{payload: string}>) => {
history.push({
pathname: '/',
state: { payload: 'some data' },
});
}