时间戳

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

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

问题描述

我对 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 解决方案。我真的很感激任何帮助。我对此进行了很多搜索，但仍然没有找到解决方案。请帮忙！

谢谢你。

标签： reactjstypescriptreact-hookscomponentsreact-button

解决方案

如果你真的不想使用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>
  )
  
}

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

推荐阅读