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

JavascriptReactjsReact Router

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

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

Solution 4 - Javascript

Hi semantic ui react example

             <Menu.Item name="NotFound" as={NavLink} to="/dadsadsa" />

Solution 5 - Javascript

In case the above methods don't work, check if you are importing the right component where you are defining the routes. (In my case, I imported a component with the same name but from a wrong path)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRickView Question on Stackoverflow
Solution 1 - JavascriptRickView Answer on Stackoverflow
Solution 2 - JavascriptJanne HarjuView Answer on Stackoverflow
Solution 3 - JavascriptEdwinView Answer on Stackoverflow
Solution 4 - Javascripttayfun KılıçView Answer on Stackoverflow
Solution 5 - JavascriptRobin JView Answer on Stackoverflow