Sometimes, we want to use normal anchor links with React Router.
In this article, we’ll look at how to use normal anchor links with React Router.
How to use normal anchor links with React Router?
To use normal anchor links with React Router, we can use the Link
component.
For instance, we write
import React from "react";
import { Link } from "react-router-dom";
const Comp = () => {
//...
return (
<Link to={{ pathname: "/this-view-path", hash: "#faq-1" }}>Question 1</Link>
);
};
to render the Link
component by setting the to
prop to the destination we want to go when the link is clicked.
Link
renders into an anchor element.
Conclusion
To use normal anchor links with React Router, we can use the Link
component.