想要在下一个选项卡上同时打开一个 URL 并导航到一个路由：React+ React Router V4+ semantic-ui-react

Question

我遇到这种情况，我从后端获取特定的 URL 然后单击一个按钮，我必须在新选项卡中打开该 link 并加载一个组件在当前选项卡中使用 react-router


import { Button } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import * as React from 'react';

this.state={ url: ''} ; // This url I am able to get using fetch

//I get URL from the backend, and then I am trying to set it to href attribute. Routing just works find but link does not get opened in the new tab.

<Link to="/path">
     <a href={this.state.url} target="_blank">
        <Button size="small" fluid >
           Continue
        </Button>
     </a>
</Link>

Answer 1

试试这个：

onBtnClick = (e) => {
    window.open(this.state.url, '_blank');
    this.props.history.push('/link/to/route/in/current/tab');
}

...

<Button size="small" fluid onClick={this.onBtnClick}>
    Continue
</Button>

Answer 2

免责声明。这是针对那些在 Google 上看到此答案但不喜欢建议实施的人。

一个更好的解决方案（在我看来）是这个

<Button as={Link} to='/path' target='_blank'>

想要在下一个选项卡上同时打开一个 URL 并导航到一个路由：React+ React Router V4+ semantic-ui-react

Want to simultaneously open a URL on the next tab and also navigate to a route: React+ React Router V4+ semantic-ui-react

typescript

reactjs

react-router

semantic-ui-react