Question

Is there a way to get React Router to open a link in new tab? I tried this and it did not work.

--color
--tty
--require '/Users/me/.rvm/gems/ruby-2.0.0-p451@global/gems/fancy-formatter-0.11/lib/fancy_formatter.rb'
--format FancyFormatter

It's possible to fluff it by adding something like <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> to the Link like what I have above, but there would be a console error.

Thanks.

Answer 1

在当前版本的React Router中，您可以使用：

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

Answer 2

我们可以使用以下选项： -

 // first option is:-
    <Link to="myRoute" params={myParams} target="_blank">

 // second option is:-
    var href = this.props.history.createHref('myRoute', myParams);
    <a href={href} target="_blank">

 //third option is:-
    var href = '/myRoute/' + myParams.foo + '/' + myParams.bar;
    <a href={href} target="_blank">

我们可以使用三个选项中的任何一个通过反应路由在新标签中打开。

Answer 3

从react_router 1.0开始，道具将被传递到锚标签。您可以直接使用target="_blank"。这里讨论：https://github.com/ReactTraining/react-router/issues/2188

Answer 4

就我而言，我正在使用其他功能。

功能

 function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
  }

  <Link onClick={openTab}></Link>

Answer 5

<Link to={{  pathname: "https://github.com/vinothsmart/" }} target="_blank" />

这段代码很好用，就像一个 href="" target="_blank"

Answer 6

要在新标签页中打开网址，可以使用如下所示的Link标签：

<Link to="/yourRoute" target="_blank">
    Open YourRoute in a new tab
</Link>

请记住，<Link>元素已转换为<a>元素，根据react-router-dom docs，您可以传递任何想要的道具例如标题，id，className等。

Answer 7

简单的方法是使用'to'属性：

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>

Answer 8

对于外部链接，只需使用achor代替Link：

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>

Answer 9

这对我来说很好

<Link to={`link`} target="_blank">View</Link>

Answer 10

您可以将“ {}”用作目标，这样jsx不会哭泣

<a target={"_blank"} href="your-link">Your Link</a>

Answer 11

当您使用react-router时，

target =“ _ blank”足以在新标签中打开

例如： <Link to={ / admin / posts / error-post-list / $ {this.props.errorDate} } target="_blank"> View Details </Link>

Answer 12

无需导入 react-router 或外部库即可工作。
此外，Chrome 不考虑弹出窗口，因此不会阻止窗口。

public class NavigationBehavior extends CoordinatorLayout.Behavior {

    private float height = 0;

    public final void BottomNavigationBehavior() {
    }

    public NavigationBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onLayoutChild(@NonNull @NotNull CoordinatorLayout parent, @NonNull @NotNull View child, int layoutDirection) {
        ViewGroup.MarginLayoutParams paramsCompat =
                (ViewGroup.MarginLayoutParams) child.getLayoutParams();
        height = child.getMeasuredHeight() + paramsCompat.bottomMargin;
        return super.onLayoutChild(parent, child, layoutDirection);
    }

    @Override
    public boolean onStartNestedScroll(@NonNull @NotNull CoordinatorLayout coordinatorLayout, @NonNull @NotNull View child, @NonNull @NotNull View directTargetChild, @NonNull @NotNull View target, int axes, int type) {
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedPreScroll(@NonNull @NotNull CoordinatorLayout coordinatorLayout, @NonNull @NotNull View child, @NonNull @NotNull View target, int dx, int dy, @NonNull @NotNull int[] consumed, int type) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
            child.setTranslationY(Float.max(0.0F, Float.min(height, child.getTranslationY() + (float)dy)));

    }

    public void setEndOfList(boolean endOfList) {
        this.endOfList = endOfList;
    }


}

或者如果你想使用字符串变量

<button onClick={() => window.open("https://google.com.ar")} />

React-Router open Link in new tab

12 个答案: