Search code examples
javascriptreactjsreact-router-dom

What is the difference between [MUI]'s Link and [react-router-dom]'s Link in React?

The <Link> tag of Material UI is compiled to <a> tag. And the Link of react-router-dom is compiled to <a> tag.

But the <Link> of MUI makes re-rendering. What is the main difference between two <a> tags? Thanks for your kind attention.

Solution

  • React Router's <Link> component does not cause a page refresh when it's clicked (React Router handles client-side navigation), but regular <a> elements and those from MUI will because they are not directly related to the router.

    You can use the component property of MUI's link to make it render using React Router's <Link>.

    import Link from '@mui/material/Link';
import { Link as ReactRouterLink } from 'react-router-dom';

<Link component={ReactRouterLink} to="/path">
    Link Text
</Link>