[英]React Router - Open Link on new Tab and Redirect to Home Page
Using React Router 4.2
使用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. 我的尝试是在点击导航链接时打开一个新标签,同时重定向到网站主页。
ie: Navigation bar: clicking on Policies 即:导航栏:点击“政策”
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学习最佳实践。
//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>
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: 您可以像这样添加一个
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>
And then in same component add the handler: 然后在同一个组件中添加处理程序:
handlePoliciesClick = () => {
window.open(HandbookDoc, '_blank');
}
Remember to import your HandbookDoc
. 请记住导入您的
HandbookDoc
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.