How to open up a new page when clicked on a button in React.js without using Routers?

Question

I am very new to React (React hooks, etc). My task is to open up a page when clicked on a button. I do not want to change the url in this case. Just open up a new page (just load the new page component on the main page)?

Example,

export function MainPage(){

const [new_page, openNewPage] = useState('');
     
     return (
        <header className = "styling_headers">

          <button onClick = {() => openNewPage("SetNewPage")} > Click Me </button>
          {if (new_page==="SetNewPage")?<NewComponent></NewComponent>: null{""}}

        </header>
     )

}

Now, after clicking on the button "Click Me", I just want to open a new page completely without changing the URL (ie, keeping the main page url when clicked on the button and moving to the new page), this means that the new page would just be a component of the main page. I do not want to use routers just for opening the new page. I do not want the contents of the main page to reflect on the new page either. It should be a fresh page with only the contents of the new page. How do I achieve this?

-- The new page component --

export function NewComponent (){ // maybe some props will be passed here when clicked on the button. 

    return (
       
       <div> This is the new page when clicked on the button </div>
    )

}

Please can someone modify the above code or direct me in how I can link the NewComponent Page when clicked on the "Click Me" button on the main page without using routers? React hooks or any other React solution is welcome. I would really appreciate any help. I googled a lot about this, but still haven't found the solution for this. Please help!

Thank you.

Answer 1

If you really don't want to use react-router you can use plain React state and render component accordingly on the current state. Something like this

function MainPage(){
  const [page, setPage] = useState("");
  
  
  return(
    <header className = "styling_headers">
          <button onClick={() => setPage("MAIN_PAGE")}> 
              Change to main page                 
          </button>
          <button onClick={() => setPage("OTHER_PAGE")}> 
             Change to other page 
          </button>
          
          {page === "MAIN_PAGE" ? <MainPage/> : null}
          {page === "OTHER_PAGE" ? <OtherPage/> : null}
    </header>
  )
  
}

Again you should only use this if you app is small. If your app is big enough doing this may make you app very complicated, consider that you may have other logic in the app