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

Question

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?

`Link` eventually calls `history.pushState` which is what sets the URL without causing the page to refresh. https://developer.mozilla.org/en-US/docs/Web/API/History/pushState — azium, Nov 27 '15 at 22:01

score 83 · Accepted Answer · edited Oct 17 '19 at 08:26

83

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>
    )
  }
};

edited Oct 17 '19 at 08:26

JGallardo

11,074
10
82
96

answered Jul 26 '16 at 10:15

Rick

8,366
8
47
76

Does this hold true for static site generation as well? – Sam Sep 30 '16 at 18:19
How about NavItem href in react-bootstrap?

– Hamid Aug 23 '17 at 04:46
NavItem acts like a so it will reload the page – Sairam Krish Aug 30 '17 at 10:50
6

Does this mean using `a href` is discouraged altogether for a React SPA, and always replace with `link` when making basic links? e.g. `a href` causes full reload in all cases? – blamb Mar 10 '18 at 22:46

score 5 · Answer 2 · edited May 19 '20 at 03:01

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

score 4 · Answer 3 · answered Aug 23 '17 at 10:08

4

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';

answered Aug 23 '17 at 10:08

Janne Harju

976
1
14
29

9

Different versions of react-router: `version 4: import { Link } from react-router-dom` `version 3 or before: import { Link } from react-router` – Nicolas Sep 06 '17 at 22:58
it is not available in earlier version but with version 4 and above you can do this `import { Link } from 'react-router-dom'` – M.suleman Khan Mar 25 '19 at 18:55

score 1 · Answer 4 · answered Nov 18 '20 at 10:55

1

Hi semantic ui react example

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

answered Nov 18 '20 at 10:55

tayfun Kılıç

2,042
1
14
11

1

This is the correct answer if using React-Bootstrap [Nav.Link](https://react-bootstrap-v4.netlify.app/components/navs/#nav-link-props). Import `NavLink` from react-router-dom. Change `href` to `to` and add the `as` property: `Account` – mcarson Oct 20 '21 at 19:58
Hi @mcarson your answer is correct thank you – tayfun Kılıç Oct 20 '21 at 20:20

score 0 · Answer 5 · answered Jan 05 '21 at 19:01

0

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)

answered Jan 05 '21 at 19:01

Robin J

11
3

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

5 Answers5