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>
Related
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.
After updating Next.js to version 13, I got this client error
<Link href="/contact">
<a>
Contact
</a>
</Link>
In Next.13, you don't need to wrap with . But if you need it, you need to add legacyBehavior props to the <Link>.
To fix this error, remove the a tag from the link. From the link in the error message:
Starting with Next.js 13, <Link> renders as <a>, so attempting to use <a> as a child is invalid.
Invalid
<Link href="/contact">
<a>
Contact
</a>
</Link>
Valid
<Link href="/contact">
Contact
</Link>
This means in your code, you have <a> inside <link> tags, you can simply remove <a> and make sure the attributes moved to <link>tags.
so one of the best practice for Productions is to lock down the NextJs version in case Breaking changes like this happen without awareness.
First of all, you don't need to wrap each other it's not a good behavior but if you need it, you can add 'legacyBehavior' in Link. it will work. like this -
<Link legacyBehavior href={"/fashion"}>
<a className="text-decoration-none">
<div></div>
</a>
</Link>
To fix this error simply replace your code with the given below code.
<Link href="/contact">Contact</Link>
I hope so it will work
I am trying to understand basics of reach router and have doubts on following code
import React from "react";
import { render } from "react-dom";
import Logo from "./Logo";
import { Router, Link } from "#reach/router";
let Home = () => (
<div>
<h1>Home</h1>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/dashboard">Dashboard</Link>
</nav>
</div>
)
let Dash = () => <div>Dash</div>
render(<Router>
<Home path="/" />
<Dash path="dashboard" />
</Router>, document.getElementById("root"));
I know that this Router works as Switch from router 4, i.e., renders only one path inside router.
Now when I start the app initially I am inside Home, e.g. here
<div>
<h1>Home</h1>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/dashboard">Dashboard</Link>
</nav>
</div>
At this moment it is my belief that Dashboard component hasn't been rendered anywhere. However, if I type dashboard in URL or click the above link it correctly takes me to Dashboard component.
My question is how does algorithm of resolving to Dashboard works in this case?
Does it "restart" the app and see that there was a component registered for "dashboard" route initially?
My point is because when I am at home location there is nothing on the page anymore that indicates that Dashboard component is registered under dashboard route, or I am wrong?
<Router>'s internal implementation uses history.listen() (https://github.com/reach/router/blob/master/src/index.js#L103) which in turn listens to native popstate events (https://developer.mozilla.org/en-US/docs/Web/Events/popstate). You can see it in action here.
It looks like your intuitions are indeed right. <Router> component is history-aware by listening to history changes. It re-renders routes as a result of internal setState calls.
I can recommend going though the source code if you'd like to know even more about implementation details.
I'm using react router 4 and trying to link to an image on my page. When I click the link, the image just downloads instead of opening in a new tab or on the same page. Ideally I'd it to open the image on the same page in the browser.
I'm using prismic which is a headless cms to host the content images so I don't believe i have access to the content header to change it. Is there any way I can force this behavior through react or react-router?
render(){
return (
<Wrapper>
{landscapeList.map((value, index) => (
<Link key={index} to={value.src} target="_blank">
<img key={index} src={value.src} />
</Link>
))}
</Wrapper>
);
}
The target blank seems to open a new browser for a moment but then just downloads the image again.
Anyone have any ideas on this one?
Take out the “_blank” attribute
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.