CODEWITHSUNDEEP
javascriptreactjsreact-router
citizenZero
citizenZero

Reputation: 33

Opening in a new tab through <Redirect /> component of react router

React Router Link component takes in target="_blank" to open the page in a new tab. Is there a way to do the same with the Redirect component?

The way my components are set up, I can't wrap Link around the component in question (there is a button on the component, clicking on which also redirects, which I don't want) that's why I'm using Redirect instead, but can't find a way to open the new URL in a new tab, How can it be done?

Upvotes: 2

Views: 2411

Answers (1)

norbitrial
norbitrial

Reputation: 15166

Is there a way to do the same with the Redirect component?

Short answer:

No.

Bit longer:

Technically <Link> creates an <a> tag for you which works with target="_blank". From the docs:

Provides declarative, accessible navigation around your application.

<Redirect> is used for something else, as the documentation states:

Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

So in summary <Redirect> is updating the history, <Link> is used as an anchor tag. At the end of the day if you really need to use target="_blank" then I would suggest to use <Link> or create an <a> tag for that purpose.

Earlier I have create a GitHub repository which represents redirect options, please find it below: https://github.com/norbitrial/react-router-programmatically-redirect-examples

I hope that helps!

Upvotes: 1

Related Questions