How to create new page without react router - reactjs

Question

I am creating a react project where I have a button in my home page and when I click it, it should open up a new page that contains a form to fill. Because it is a form and it should only appear after clicking the button on the home page, I don't want to use react router because I don't want the user to just type 'mywebsite.com/form'. I also want the functionality that, when the user submits the form, the page then goes back to the homepage and the data from the form should be available in the home page. For example, if the form had text fields, lists, date pickers, etc. I want all that data in the homepage after the user submits the form.
P.S. I am using material-ui components for my whole app so the text fields, datepickers, etc. are all mui components, so the data fetching from these components has to be according to that.

Answer 1

In your Home component do a conditional render based on if the button was clicked. If it was, render your Form component. Ideally your Home component should be your smart component and the Form should be a dumb component. Meaning that Home should manage all the state and Form is purely just for visuals(UI).
import React, {useState, useEffect} from 'react';
import myForm from './myForm';
const Home = () => {
const [isBtnClicked, setIsBtnClicked] = useState(false);
const [formData, setFormData] = useState(undefined);
useEffect(() => {
if(formData){
setIsBtnClicked(false); // or you can pass this setter to form component and set to false when form is submitted.
}
},[formData])
return (
<>
{isBtnClicked
? <myForm setFormData={setFormData} />
: (<h2>Home With Button</h2>
<Button variant="contained" onClick={() => setIsBtnClicked(true)})
}
};
import React from 'react';
const myForm = ({setFormData}) => {
//assuming you have refs to all inputs
const handleFormSubmit = (e) => {
e.preventDefault();
// construct form data and call setFormData()
}
return (
<>
<form onSubmit={handleFormSubmit()}>
...
</form>
</>
};

Answer 2

Since you are using material-ui, I would recommend you use one of their Dialog components. In case you want to make it look like a completely different page opens up to fill the form, you could use their full-screen dialog component. Build your form within this component and change the props to your liking. Conditionally render the form when the user clicks a button on your home page.
Use the fullscreen prop from the Dialog API and add others that you need.

Answer 3

If i can give my opinion, i think you can use NextJS with server side rendering for this. NextJS provides a structured folder called "pages". You can add your page to this. The redirecting can also be done using router in next package. An easy way without any need for react router. I used to use react router until i found out about this.