CODEWITHSUNDEEP
javascriptreactjshyperlinkreloadwindow.location
ranjana sharma
ranjana sharma

Reputation: 11

React js-How to prevent page reload once click on the link. Right now the whole page is getting refresh on clicking the link

I have link in which is the invoice number so once i click on it,it should provide data of particular invoice number without reloading the page.[code]

Upvotes: 1

Views: 34944

Answers (4)

Gor Dhrumil
Gor Dhrumil

Reputation: 11

Easy way to redirect another page without refreshing the page ...

import React from 'react';
import { Link } from "react-router-dom";

addpost is route name

<ul>
<li><Link to="/addpost">AddPost</Link> </li>
</ul>

Upvotes: 1

Lcool
Lcool

Reputation: 379

use components that are provided by the 'react-router-dom' package, instead of the anchor tag 'a', use 'Link' or 'NavLink' components example : from this => <a href='#'>my-link></a> to this => <Link to='#'>my-link></Link>

for more information , checkout the official documentation https://reactrouter.com/docs/en/v6/examples/basic

Upvotes: 3

Prateek Thapa
Prateek Thapa

Reputation: 4938

You could prevent the page from reloading by using preventDefault method in the event practice.

function onLinkClick(e) {
   e.preventDefault();
   // further processing happens here
}

<a href="/my-invoice-link" onClick={onLinkClick} />

Upvotes: 1

Louis Coulet
Louis Coulet

Reputation: 4641

Routing is normally handled by the browser, which sends HTTP requests when the URL changes.
Here it seems you want your app to handle URL changes, so that it displays content depending on the URL. This is called client-side routing, you can do it using:

Upvotes: 1

Related Questions