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

Posted 2023-02-23

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

【英文标题】：How to open up a new page when clicked on a button in React.js without using Routers?

【发布时间】：2021-03-03 10:19:41

【问题描述】：

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

谢谢。

【问题讨论】：

你认为你会怎么做？到目前为止，您尝试过什么来实现这一点？你看过useState()吗？你知道如何根据变量有条件地渲染一些东西吗？向我们展示您解决此问题的尝试以及您遇到的问题，我们可能会帮助您解决剩下的问题。

嗨，Alex，感谢您指出 useState()。我阅读了 abt useState() ，甚至通过构建一个按钮然后单击它来实现一个演示。点击后，我只能在主页上获取新页面（另一个组件）的内容，但无法完全打开一个新页面。将用我所做的和@Kunquan 的代码帮助来编辑我上面的代码。

@AlexWayne 我已经编辑了上面的代码（从昆泉的代码中得到了一些理解）。上面的代码在点击按钮后在主页面渲染新页面的内容。我只想在单击主页上的按钮后呈现新页面的内容。如何打开新页面？请指导我。我已经被这个问题困扰了很长时间，我需要一些帮助来理解这一点。

【参考方案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>
  )
  

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

【讨论】：

点击按钮后不会打开新页面，只是在点击按钮后将新页面的内容粘贴到主页上。

@skate_23 你想导航到一个新页面，但不更改 url？这真的没有意义。

好的，那么可以通过更改 URL 但没有 React 路由器或仅通过对上述代码进行一些基本更改来导航到新页面？ @AlexWayne

@skate_23 读取 here 以打开新窗口，here 用于获取当前 URL。然后根据 URL 有条件地呈现内容