We Keep Coding

How to apply target='_blank' to a <Link> which contains an element other than just an <a> [duplicate]

This question already has answers here:
How can I open the path I set in Nextjs on the new tab?
(3 answers)
Closed 29 days ago.
I am trying to open a new browser tab and redirect to the respected URL when the button is clicked, however when an element other than an anchor tag is used inside Next's <Link> element, it just ignores the target="_blank" attribute.
The structure is as below:
<Link passHref href={applicationUrl}>
<Button className={styles.button}>
<a target="_blank">Apply</a>
</Button>
</Link>
I can't easily get rid of the component in the middle, because of styling purposes. But it seems that in this structure, I can't get the applicationUrl to open in a new tab. It still redirects, but in the same browser tab.
If I remove the component in the middle, it works though.
<Link passHref href={applicationUrl}>
<a target="_blank">Apply</a>
</Link>
How do I get it to work without losing the styling, or duplicating CSS that is necessary?
Update:
Apparently changing the order of the <Button> and <a> is a solution.
<Link passHref href={applicationUrl}>
<a target="_blank">
<Button className={styles.button}>
Apply
</Button>
</a>
</Link>

Set target="_blank" as a prop for the Link and it should work just fine.
<Link passHref href={applicationUrl} target="_blank">
<Button className={styles.button}>
<a>Apply</a>
</Button>
</Link>
That being said, there's no reason to use a Link if you're opening the page in a new tab. You can just get rid of the Link and put the href and target in the a tag.

React Scroll and Material-UI button active link does not work

It does go to the correct page, however, how can I make a background effect or change the font color when the link is active? I tried a CSS with this and it does not work.
codesandbox:https://codesandbox.io/s/cocky-sun-xg80c5?file=/src/App.js
.active{
background-color: 'red';
}
{pages.map((page) => (
<Link
to={page.link}
spy={true}
smooth={true}
offset={-100}
duration={500}
activeClass="active"
key={page.id}
>
<Button
key={page.id}
sx={{
my: 2,
color: "black",
display: "block",
}}
>
{page.title}
</Button>
</Link>
))}
This is my json package:

Why would you wrapp a Button inside a Link Element ?
A Link is a semantic Element that links to another part of your page or an external page so I don't see a reason for nesting a button inside a link.
So I ended up with something like this and this works fine for me now:

react-scroll navigate and scroll to anchor from any page

I'm using react-scroll to scroll from the Nav to any preset anchor element.
I chose it because it also provides an active class to the Nav items when element is in viewport.
This exmple works if i'm on the HomePage. But if i click the navbar item from another page it doesn't work.
I need to make the scrolling work from another page as well.
Need to mention that all the Anchor Elements are on the HomePage and using create-react-app with v5 router.
CODESANDBOX example
Github issue link
PS: If you know any better library that can do this and add active class please post it here.
import { Element} from 'react-scroll';
export function HomePage() {
return (
<>
<title>Home</title>
<Banner />
<Element name="price-plan-list">
<PriceplanList />
</Element>
<Element name="entertainment-area">
<EntertainmentArea />
</Element>
</>
);
}
And this is the NavbarItem:
import { Link as AnchorLink } from 'react-scroll';
<NavItem key={index}>
<AnchorLink
activeClass="active"
to={item.link}
spy={true}
hashSpy={true}
duration={1000}
>
{item.title}
</AnchorLink>
</NavItem>

React router link keeps pushing to history same url?

I'm using React Router 4. One concern I have is that if you use the <Link /> component to navigate between routes, lets say in your header, and you click on that same link again it will keep pushing the same url to browser history? Is there any way to prevent this behaviour, or is it completely up to me as developer to either replace that <Link /> with something something like a <span> element (if I dont want users to be able to click that link)?
Or should I do my own version of the <Link /> component and then inside that prevent from firing events when on the same route?

Yes, agree with #MaximeGirou. You can use your own trick.
Or another way is to define a class with some CSS properties [like cursor:not-allowed etc.] and give that class name in activeClassName attribute.
<NavLink to="/dashboard" activeClassName="linkActive">
<i className="icon icon-home" /> <span>Dashboard</span>
</NavLink>

React bootstrap navbar not appropriate linking to other pages

I currently have an app with a few different pages, the routing works fine if I use the Link to component in the initial page, however from the navbar I get the message:
Cannot GET /page1
And I also noticed that the link on the top of the browser goes to: http://localhost:3000/page1 as opposed to http://localhost:3000/#/cities (like it would if I use Link to).
My current navbar code is this:
export class NavigationBar extends Component {
render(){
return(
<Navbar>
<Navbar.Header>
<Navbar.Brand>
Navbar
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/page1">Page1</NavItem>
<NavItem eventKey={2} href="/page2">Page2</NavItem>
</Nav>
</Navbar>);
}
}
If I just wrap the text up with Link to, it just works when we click on the text, which isn't what I want. What can I do so that the NavItem will behave like Link to but still look fine?
Thanks

I completely forgot that I need to wrap up each of my NavItem components with the LinkContainer from react-router-bootstrap.
That took care of everything.