Estoy trabajando en una aplicación donde en una página tiene un botón. Cuando seleccione el botón, irá a otra página.
Estoy usando Push in UseHistory() para pasar entre páginas. Sé que podemos ir a un div específico usando una etiqueta de anclaje. Pero no quiero usar la etiqueta de anclaje. ¿Alguien puede ayudarme? ¿Cómo puedo hacer eso en reaccionar?
Este es el componente de botón que usé para redirigir a otra página.
const { push } = useHistory(); return ( <> {surveyDisableTime && <SurveyInfoBox />} <EmptyList image={<NoDataIcon />} title={formatMessage({ id: 'event.survey_response.assign_survey.heading' })} subtitle={formatMessage({ id: 'event.survey_response.assign_survey.subheading' })} onButtonClick={() => push(AppRoute.editEvent.replace(':eventId', event.id), { from: pathname })} buttonText={formatMessage({ id: 'event.survey_response.assign_survey.button_label' })} disabled={surveyDisableTime} /> </> ); Esta es la función onclick -> onButtonClick={() => push(AppRoute.editEvent.replace(':eventId', event.id), { from: pathname })}
En el evento de edición, necesito ir a un componente específico. ¿Cómo puedo hacer eso?
Digamos que este es el componente de la página en la que se recargará el enrutador,
return ( <div className={classes.container}> <div className={classes.creatEventContainer}> <div className={classes.formWrapper}> <BasicInfoSection institutionOptions={institutionOptions} seasons={seasons || []} isSeasonFieldDisabled={isSeasonFieldDisabled} {...props} /> <EventLocation isVisible={!!isInPerson} errors={errors} register={register} {...props} /> <SurveySelection isSurveyFieldDisabled={isSurveyFieldDisabled} isVisible={!!isSurvey} {...props} /> <DateAndTimeSection control={control} errors={errors} /> <NameRecordingsServicesSectionContainer fields={fields} remove={remove} append={append} languageVoices={languageVoices} /> </div> </div> </div> )Necesito ir a componente.
Gracias de antemano.
prueba useNavigate() en su lugar porque el gancho useHistory ya no es compatible con react-router-dom v6.
si la encuesta es falsa, se devuelve el componente Encuesta, pero si el usuario la completa, el estado de la encuesta sería verdadero y se representaría Otro componente.
... const [filledOutTheSurvey, setFilledOutTheSurvey] = useState(false); return ( <div> {filledOutTheSurvey === true ? <AnotherComp/> : filledOutTheSurvey === false ? <Survey setFilledOutTheSurvey={setFilledOutTheSurvey} /> : null } </div> ) ... function Survey({setFilledOutTheSurvey}){ return <form onSubmit={() => setFilledOutTheSurvey(true)}>...</form> }