CODEWITHSUNDEEP
javascriptreactjsreact-router
Rick
Rick

Reputation: 8846

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?

Upvotes: 60

Views: 51027

Answers (5)

Robin J
Robin J

Reputation: 11

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)

Upvotes: 0

tayfun Kılı&#231;
tayfun Kılı&#231;

Reputation: 2843

Hi semantic ui react example

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

Upvotes: 1

Edwin
Edwin

Reputation: 69

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

Upvotes: 5

Rick
Rick

Reputation: 8846

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

Upvotes: 86

Janne Harju
Janne Harju

Reputation: 1171

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

Upvotes: 4

Related Questions