Adding target=_blank to link tag in button in react does not open new page but disables it?

Question

I'm developing a web page with React + Material UI. I want to open a new tab to the link specified and I tried this. It redirects to the link if I do not add target= _blank but it opens in the same tab. If I add target=_blank the button doesn't work at all? The react-route-dom version I have is ^5.2.0. I've tried it on edge and chrome so the problem is not browser specific. I'm using has router and the app might be deployed to with different base url names so I want to avoid hardcoding the url with "http://...".Any help will be appreciated.

 const markLink = (
            <Link
                to={
                    {
                        pathname: "/AssessmentList",
                        search: "?groupId =" + this.state.groupId + " & unitOfferingId=" + this.state.unitOfferingId
                            + "&userId=" + this.state.userId + "&role=" + this.state.role + "&groupName=" + this.state.selectedGroup.group_name
                    } 
               
                } 
                target="_blank"
                style={{ textDecoration: "none", color: "white" }}
            >

                Mark
            </Link>);

Then I use it in my button like this

<ButtonMenu items={[]} name={markLink} working={this.state.project_archived} action={() => {
            }} />

EDIT: I also tried target={"_blank"}. I've tried the suggestions on previous posts but it seems like most pf the URL's need to be "http://" and not the relative path.I'm not sure how to pass in dynamic URLs.

Does this answer your question? [React-Router open Link in new tab](https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab) — kirecligol, Oct 19 '20 at 12:04
No i've visited that page.Most of the answers there must input URL using "http:" and I'm not sure how to pass in a dyanamic url? — Sook Lim, Oct 19 '20 at 12:07

score 0 · Accepted Answer · answered Oct 19 '20 at 12:21

0

The point of using react-router is to render components depending on the url. If you are planning to open the page on a new link just use a regular a element.

const { groupId, unitOffering, userId, role, selectedGroup } = this.state;

const path = `/AssessmentList?groupId=${groupId}&unitOfferingId=${unitOfferingId}&userId=${userId}&role=${role}&groupName=${selectedGroup.group_name}`;

return (
  <a
    href={path}
    target="_blank"
    rel="noopener noreferrer"
    style={{ textDecoration: "none", color: "white" }}>
    Mark
  </a>
);

answered Oct 19 '20 at 12:21

alextrastero

3,703
2
21
31

If I don't use the tag, the route will be without the # at the beginning and this will cause the page to be not found and re routed to the index page.I'm using hash router. – Sook Lim Oct 19 '20 at 12:47
Can you not add the `#` to the path variable? But my previous answer still stands, if you are opening in a new tab, there is no need to use `Link` from react-router. – alextrastero Oct 19 '20 at 13:24
However, I'm trying to style it like a button and if I embed a button tag inside the tag, the problem still persists? – Sook Lim Oct 19 '20 at 13:53
That's a different question :-) – alextrastero Oct 20 '20 at 08:10

Adding target=_blank to link tag in button in react does not open new page but disables it?

1 Answers1