React js-单击链接后如何防止页面重新加载。 现在整个页面都在点击链接时刷新

Question

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]

Answer 1

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:

• the history API
• a library, for example react-router-dom

Answer 2

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>

Answer 3

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

Answer 4

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} />