如何在将聊天机器人保持在同一屏幕的同时重定向/导航到新页面？

Question

我一直在尝试创建一个基于反应的聊天机器人，因为如果用户按下聊天机器人中的选项/按钮，我想在聊天机器人之外并在同一页面上显示一个组件。我尝试添加一个弹出功能，用于侧面导航的面包屑，但无法在chatbot外部显示它。它显示了其中的所有内容。我不想刷新我的页面。我该如何在ReactJS中做到这一点？

Answer 1

好吧，假设您具有某种客户端路由。

任何您想要抛弃聊天机器人的东西：

function YourApp() {
  <React.Fragment>
    <Chatbot>  // Chatbot should be outside of route changes
    <Router>    
      <Whatever component your route decides to render>
    <Router>
  </React.Fragment>
}

此外，使用CSS将您的聊天机器人置于所有事物之上。