React-Router is refreshing page when I follow a route using <a> tag
JavascriptReactjsReact RouterJavascript 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)