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.

CodePudding user response：

try useNavigate() instead because !

CodePudding user response：

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>
}