在不使用路由器的情况下单击 React.js 中的按钮时如何打开新页面？

Question

我对 React 很陌生（React 钩子等）。我的任务是在单击按钮时打开一个页面。在这种情况下，我不想更改 url。只打开一个新页面（只在主页面加载新页面组件）？

例子，

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

}

现在，点击“点击我”按钮后，我只想在不更改 URL 的情况下完全打开一个新页面（即，在单击按钮时保持主页 url 并移动到新页面），这个意味着新页面将只是主页的一个组件。我不想仅仅为了打开新页面而使用路由器。我也不希望主页的内容反映在新页面上。它应该是一个只有新页面内容的新页面。我如何做到这一点？

-- 新的页面组件--

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

}

请有人修改上述代码或指导我如何在不使用路由器的情况下单击主页上的“单击我”按钮链接 NewComponent 页面？欢迎使用 React 钩子或任何其他 React 解决方案。 我真的很感激任何帮助。我对此进行了很多搜索，但仍然没有找到解决方案。请帮忙！

谢谢。

Answer 1

如果你真的不想使用react-router，你可以使用普通的 React 状态并在当前状态上相应地渲染组件。像这样的

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

同样，如果您的应用程序很小，您应该只使用它。如果您的应用程序足够大，这样做可能会使您的应用程序非常复杂，请考虑您的应用程序中可能还有其他逻辑