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

使用 React Router 4.2

我的尝试是open单击导航链接后会出现一个新选项卡，同时重定向到网站主页。

即：导航栏：单击“策略”

即使下面的代码的行为符合上述要求：这是明智的方法吗？ 旨在学习 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>

您不需要为您想要实现的目标创建新路线。你可以添加一个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.