1

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.

skate_23
  • 447
  • 1
  • 11
  • 25
  • How do you think you would go about this? What have you tried so far to implement this? Have you looked at [`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate)? Do you know how to conditionally render something based on a variable? Show us your attempt to solve this and where you got stuck, and we can probably help get you the rest of the way there. – Alex Wayne Nov 20 '20 at 01:13
  • Hey Alex, thank you for pointing out the useState(). I read abt useState() and even implemented a demo by building a button and then clicking on it. After I click on it, I am able to only get the contents of the New Page (the other component) on the main page, but not able to open up a new page completely. Will edit my above code with what I have done and with @Kunquan's code help. – skate_23 Nov 20 '20 at 08:22
  • @AlexWayne I have edited the above code (with some understading from Kunquan's code). The above code renders the contents of the new page on the main page after clicking the button. I only want to render the new page's contents after clicking the button from the main page. How do I open a fresh page? Please guide me. I have been stuck on this for a long time and I need some help to understand this. – skate_23 Nov 20 '20 at 18:17

1 Answers1

0

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

kunquan
  • 1,127
  • 1
  • 10
  • 24
  • This does not open a new page after clicking the button, it just pastes the contents of the new page on the main page after clicking the button. – skate_23 Nov 20 '20 at 08:03
  • @skate_23 So you want to navigate to a new page, but without changing the url? That doesn't really make sense. – Alex Wayne Nov 20 '20 at 18:54
  • Okay, so can navigate to a new page with changing the URL but without React routers or just by making some basic changes in the above code? @AlexWayne – skate_23 Nov 20 '20 at 19:38
  • @skate_23 read [here](https://stackoverflow.com/questions/267704/javascript-open-new-page-in-same-window) for open new window and [here](https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript) for getting the current URL. Then you render the content conditionally based on URL – kunquan Nov 20 '20 at 20:24