Categories
React Answers

How to use normal anchor links with React Router?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *