在ReactJs中添加查询参数时，“返回”按钮不起作用

编程问答 2022-08-12

问题描述

让我介绍一下造成问题的原因。 我的React Web应用程序中有3条路由：

  1. "/"进入主页。
  2. "/page2" for page2。
  3. "/page3" for page3。

现在，当我沿路线"/page2"行驶时，我正在做的事情是，我在URL中推送查询参数以呈现page2中的默认标签，从而使URL为"/page2?activeTab=tabId”。一个简短的提示，当我尝试转到"/page2"时，它将始终将URL设置为"/page2?activeTab=tabId"。

现在的问题是，当我第一次进入Page2并尝试按浏览器上的后退按钮时。我一次又一次地重新提交page2。原因是：假设我是第一次进入第2页，而网址将为"/page2?activeTab=tabId"。现在，当我按下返回按钮时，浏览器将删除查询参数并呈现URL "/page2"。因此，每当URL再次呈现我的代码时，便会将其变为"/page2?activeTab=tabId"。因此，我不能只停留在第二页。

在这方面我需要帮助。如何消除或避免这个问题？

解决方法

使用重定向和路由可以解决此问题。也许以下代码段可以帮助您。

  <Switch>
     <Redirect from='/page2' to='/page2?activeTab=tabId' />
     <Route path="/page2?activeTab=tabId" >
       <Page2 />
     </Route>
     //....
  </Switch>

Sandbox working example

react-routerreactjsreactjsweb