Tengo este ejemplo para un formulario React con Typescript y Material-UI.
import React, { useState } from "react"; import TextField from "@material-ui/core/TextField"; import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; import { Box, Button, Container, Grid, Typography } from "@material-ui/core"; import SaveIcon from "@material-ui/icons/Save"; import { TicketDTO } from "../../service/support/types"; import { postTicket } from "../../service/support"; import { useForm } from "react-hook-form"; import { Redirect } from "react-router-dom"; export default function OpenTicket(props: any) { const { register, handleSubmit, formState: { errors }, } = useForm<TicketDTO>(); const onSubmit = async (data: TicketDTO) => { postTicket(data) .then(({ data }) => { console.log(data.title); }) .catch((err) => { console.log(err); }); }; const formHandler = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); console.log(e.target); }; return ( <Container> <form onSubmit={handleSubmit(onSubmit)}> <TextField id="title" {...register("title", { required: true, maxLength: 40, })} /> <Button variant="contained" color="primary" size="small" type="submit" startIcon={<SaveIcon />} > Submit Ticket </Button> </form> </Container> ); }Después de enviar correctamente el formulario, ¿cómo puedo redirigir al usuario a una nueva página?
Puedes hacerlo
const router = useHistory(); const onSubmit = async (data: TicketDTO) => { postTicket(data) .then(({ data }) => { console.log(data.title); router.push('/path_name_of_the_page') }) .catch((err) => { console.log(err); }); };tenga en cuenta que useHistory () se importan desde 'react-router'
import {useHistory} from "react-router";