I am having an issue where the "right click" on the links that are created with React Router Link tags. I want to be able to right click on those links and select "Open Link in New Tab" option. Could anyone please help me with this issue?

Here is my code:

redirectUrl = (e) => {
    let url = e.currentTarget.getAttribute("dataattrurl");
    browserHistory.push({
      pathname    : url,
      query       : '',
      state       : {}
    });
  }
  
  const listItems = readingHistory.map((item, index) => {
      return (
        <li key={index} role="listitem">
          <Link className="linkPointer" onClick={this.redirectUrl} dataattrurl={`/document/${item.resId}`} onContextMenu={this.contextMenu}>
            {item.title}
          </Link>
        </li>
      );
    });

I am having an issue where the "right click" on the links that are created with React Router Link tags. I want to be able to right click on those links and select "Open Link in New Tab" option. Could anyone please help me with this issue?

Here is my code:

redirectUrl = (e) => {
    let url = e.currentTarget.getAttribute("dataattrurl");
    browserHistory.push({
      pathname    : url,
      query       : '',
      state       : {}
    });
  }
  
  const listItems = readingHistory.map((item, index) => {
      return (
        <li key={index} role="listitem">
          <Link className="linkPointer" onClick={this.redirectUrl} dataattrurl={`/document/${item.resId}`} onContextMenu={this.contextMenu}>
            {item.title}
          </Link>
        </li>
      );
    });

• javascript
• reactjs
• redux
• react-router
• react-redux

1 Answer 1

The problem is that you are handling the click event with an onClick rather than with an href (to for Link), so the browser does not register this as a link to another page but rather an element with a click event listener.

What you should do is make use of the to attribute of Link, which is basically the href for a regular a tag. See the docs here: https://reacttraining./react-router/web/api/Link

This will also result in much cleaner code. All your code can be reduced to:

const listItems = readingHistory.map((item, index) => {
    return (
        <li key={ index } role="listitem">
            <Link className="linkPointer" to={ `/document/${item.resId}` } onContextMenu={ this.contextMenu }>
                { item.title }
            </Link>
        </li>
    );
});

So the redirectUrl can be removed entirely.