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.