React Router - 在新选项卡上打开链接并重定向到主页答案

【问题标题】：React Router - Open Link on new Tab and Redirect to Home PageReact Router - 在新选项卡上打开链接并重定向到主页
【发布时间】：2023-03-10 19:26:01
【问题描述】：

使用 React Router 4.2

我的尝试是在点击导航链接时打开一个新标签，同时重定向到网站主页。

ie：导航栏：点击策略

即使下面的代码符合上述要求：这是可取的方法吗？旨在在 Routes.js 上学习最佳实践。

 //Routes.js
 import HandbookDoc from './policies.pdf'
 ...

 <Route 
   path="/registration/policies" 
   component={() => window.open(`${HandbookDoc}`,'_blank').then(window.location= '/')} 
 />

....

 //Navigation.js (using react-router-bootstrap)
  <NavDropdown eventKey={3} id="formId" title="Registration">
     <LinkContainer to="/registration/financial-aid">
        <MenuItem eventKey={3.1}>Financial Aid</MenuItem>
      </LinkContainer>
      <LinkContainer to="/registration/policies">
        <MenuItem eventKey={3.2}>Policies</MenuItem>
      </LinkContainer>
  </NavDropdown>

【问题讨论】：

路径/registration/policies有什么理由存在这里吗？我只需在policies 上添加一个 onClick 侦听器，然后在那里做你需要的东西。
routes.js 上设置的路径与navigation.js 上传递的相同。您将如何在这种情况下设置 onClick？
通过在包含Policies 的MenuItem 上添加一个onClick 处理程序。在那里，您可以执行window.open() 和browserHistory.push('/')
确实如此。介意发布答案吗？我没玩过browserHistory.push()

标签： javascript reactjs react-router

【解决方案1】：

您无需为您要实现的目标创建新路线。您可以像这样将onClick 处理程序添加到MenuItem：

  <NavDropdown eventKey={3} id="formId" title="Registration">
     <LinkContainer to="/registration/financial-aid">
        <MenuItem eventKey={3.1}>Financial Aid</MenuItem>
      </LinkContainer>
      <LinkContainer 
        to="/">
        <MenuItem onClick={this.handlePoliciesClick} eventKey={3.2}>Policies</MenuItem>
      </LinkContainer>
  </NavDropdown>

然后在同一个组件中添加处理程序：

handlePoliciesClick = () => {
  window.open(HandbookDoc, '_blank');
}

记得导入你的HandbookDoc。

【讨论】：

非常感谢，通过代码可视化您的解释/建议现在在我的脑海中是有意义的。唯一的问题是browserHistory 没有重定向到主页...
您是否删除了LinkContainer 中的to 属性？
我做到了。事实上，我把 LinkContainer 一起删除了，因为他们的 api 需要to，否则会抛出错误。
很奇怪。 browserHistory 是否将您重定向到其他地方？或者它根本不起作用？
它保持在同一页面上。场景 2。如果我离开 to="/"，它会将我重定向到家。这意味着仅 BrowserHistory 不会被触发。但是在新选项卡上打开点击处理程序有效。