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

问题描述

使用 React Router 4.2

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

My attempt is to open a new tab upon clicking on a navigation link and at the same time be redirected to the site homepage.

即:导航栏:点击政策

即使下面的代码符合上述要求:这是实现它的可取方式吗?旨在学习有关 Routes.js 的最佳实践.

Even though the code bellow behaves as the requirements above: Is this the advisable way to go about it?Aiming to learn best practices here on 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>

推荐答案

您无需为要实现的目标创建新路线.您可以像这样向 MenuItem 添加一个 onClick 处理程序:

You don't need to create a new route for the thing you are trying to achieve. You could add an onClick handler to the MenuItem like this:

  <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>

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

And then in same component add the handler:

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

记得导入您的HandbookDoc.

这篇关于React Router - 在新选项卡上打开链接并重定向到主页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！