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

我对反应（反应钩等）很不熟悉。我的任务是在点击按钮时打开一个页面。在这种情况下，我不想更改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>
     )

}

export函数主页（）{
const[new_page，openNewPage]=useState（“”）；
返回(
openNewPage（“SetNewPage”）}>单击我
{if（new_page==“SetNewPage”）？：null{”“}
)
}

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

--新页面组件--

导出函数NewComponent（）{//单击按钮时，可能会在此处传递一些道具。
返回(
这是单击按钮时的新页面
)
}

请有人修改上述代码或指导我如何在不使用路由器的情况下单击主页上的“单击我”按钮时链接新组件页面？欢迎使用React挂钩或任何其他React解决方案。 我真的很感激任何帮助。我在谷歌上搜索了很多，但仍然没有找到解决这个问题的方法。请帮忙

---

谢谢。

如果您确实不想使用

react路由器

，您可以使用普通react状态，并在当前状态下相应地渲染组件。像这样的

函数主页（）{
const[page，setPage]=useState（“”）；
返回(
设置页面（“主页面”）}>
更改到主页面
设置页面（“其他页面”）}>
切换到其他页面
{page==“主页”？：null}
{page==“其他页面”？：null}
)
}

如果您确实不想使用

react路由器

，您可以使用普通react状态，并在当前状态下相应地渲染组件。像这样的

函数主页（）{
const[page，setPage]=useState（“”）；
返回(
设置页面（“主页面”）}>
更改到主页面
设置页面（“其他页面”）}>
切换到其他页面
{page==“主页”？：null}
{page==“其他页面”？：null}
)
}

你认为你会怎么做？到目前为止，您尝试了什么来实现这一点？你看过吗？您知道如何基于变量有条件地呈现某些内容吗？向我们展示您解决此问题的尝试以及您遇到的困难，我们可能会帮助您完成剩下的工作。嘿，Alex，感谢您指出useState（）。我阅读了abt useState（），甚至通过构建一个按钮并单击它实现了一个演示。单击它后，我只能在主页上获取新页面（另一个组件）的内容，但无法完全打开新页面。将使用我所做的以及@Kunquan的代码帮助来编辑我的上述代码。@我已经编辑了上述代码（对Kunquan的代码有一些理解）。上面的代码在单击按钮后在主页上呈现新页面的内容。我只想在单击主页上的按钮后呈现新页面的内容。如何打开新页面？请引导我。我在这个问题上纠缠了很长时间，我需要一些帮助来理解这一点。你认为你会怎么做？到目前为止，您尝试了什么来实现这一点？你看过吗？您知道如何基于变量有条件地呈现某些内容吗？向我们展示您解决此问题的尝试以及您遇到的困难，我们可能会帮助您完成剩下的工作。嘿，Alex，感谢您指出useState（）。我阅读了abt useState（），甚至通过构建一个按钮并单击它实现了一个演示。单击它后，我只能在主页上获取新页面（另一个组件）的内容，但无法完全打开新页面。将使用我所做的以及@Kunquan的代码帮助来编辑我的上述代码。@我已经编辑了上述代码（对Kunquan的代码有一些理解）。上面的代码在单击按钮后在主页上呈现新页面的内容。我只想在单击主页上的按钮后呈现新页面的内容。如何打开新页面？请引导我。我已经在这上面呆了很长时间，我需要一些帮助来理解这一点。单击按钮后不会打开新页面，它只是在单击按钮后将新页面的内容粘贴到主页面上。@skate_23您想导航到新页面，但不更改url吗？这真的没有意义。好吧，你可以通过更改URL导航到一个新页面，但不需要对上面的代码做一些基本的更改吗@AlexWayne@skate_23阅读“打开新窗口”和“获取当前URL”。然后根据url有条件地呈现内容这在单击按钮后不会打开新页面，而是在单击按钮后将新页面的内容粘贴到主页面上。@skate_23您想导航到新页面，但不更改url吗？这真的没有意义。好吧，你可以通过更改URL导航到一个新页面，但不需要对上面的代码做一些基本的更改吗@AlexWayne@skate_23阅读“打开新窗口”和“获取当前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>
    )

}