I am working in an application where in a page it have a button. When I select the button it will go to another page.
I am using Push in UseHistory() to pass between pages. I know we can go to a specific div using anchor tag. But I don't want to use anchor tag. Can anyone help me how can I do that in react.
This is the button component I used to redirect to another page.
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}
/>
</>
);
This is the onclick function -> onButtonClick={() => push(AppRoute.editEvent.replace(':eventId', event.id), { from: pathname })}
In the editEvent I need to go to a specific component. How can I do that?
Lets say this is the component of the page the router will reload to,
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>
)
I need to go to component.
Thankyou in advance.
try useNavigate() instead because the hook useHistory is not supported in react-router-dom v6 anymore!
if filledOutTheSurvey is false then return Survey component but if the user fills out then the state of filledOutSurvey would be true and AnotherComponent would render
...
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>
}