React-Router is refreshing page when I follow a route using <a> tag

I'm building a React app that has links pointing to predefined routes.

<a href="/my/react/route/">Click Here</a>

The routes resolve fine, but it's refreshing the page, thereby slowing down app performance. How do I avoid re-rendering the entire page?

Solution 1:

Fix the problem by using the <Link> tag included with react-router.

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

export class ToolTip extends React.Component {
  render() {
    return (
      <Link to="/My/Route">Click Here</Link>
    )
  }
};

Solution 2:

First answer was correct but I didn't found Link from react-router-dom. It was in my case here:

import { Link } from 'react-router';

Solution 3:

You need to:

import { Link } from "react-router-dom"

then import the component you wish to go to

import Example from "./component/Example"

Then use Link like this

<Link to="/Example">
   <h4>Example Page</h4>
</Link>

This will stop the refreshing.

Note that, if to="/Example" matches a route you've specified in your BrowserRouter and then it sends you there.

Learn more here Reat Training / React Router