Using ponent MUI Link, my page is reloaded. So I use the Link ponent from react-route-dom, but it turns out that <.a> is inside another and error on console

If I remove MUI.Link, then navbar looks like bad

Code:

import {Link as LinkRouter} from "react-router-dom"
import Link from "@mui/material/Link";

export default function Navbar() {
    return (
        <>
            <GlobalStyles styles={{ul: {margin: 0, padding: 0, listStyle: 'none'}}}/>
            <AppBar
                position="sticky"
                color="default"
                elevation={0}
                sx={{borderBottom: (theme) => `1px solid ${theme.palette.divider}`}}
            >
                <Toolbar sx={{flexWrap: 'wrap'}}>
                    <Typography variant="h4" color="inherit" noWrap sx={{flexGrow: 1}}>
                        <LinkRouter to="/account/wall" className="site-title">YourQuestion</LinkRouter>
                    </Typography>
                    <nav>
                        <CustomLink to="/account/wall">Wall</CustomLink>
                        <CustomLink to="/account/message">Message</CustomLink>
                        <CustomLink to="/account/notice">Notice</CustomLink>
                        <CustomLink to="/account/friends">Friends</CustomLink>
                        <CustomLink to="/account/profile">Profile</CustomLink>
                    </nav>
                </Toolbar>
            </AppBar>
        </>
    )
}

function CustomLink({to, children, ...props}) {
    return (
        <>
            <Link
                variant="button"
                color="text.primary"
                sx={{ my: 1, mx: 1.5 }}
            >
                <LinkRouter to={to} {...props}>
                    {children}
                </LinkRouter>
            </Link>
        </>
    )
}

My github repository

Using ponent MUI Link, my page is reloaded. So I use the Link ponent from react-route-dom, but it turns out that <.a> is inside another and error on console

If I remove MUI.Link, then navbar looks like bad

Code:

import {Link as LinkRouter} from "react-router-dom"
import Link from "@mui/material/Link";

export default function Navbar() {
    return (
        <>
            <GlobalStyles styles={{ul: {margin: 0, padding: 0, listStyle: 'none'}}}/>
            <AppBar
                position="sticky"
                color="default"
                elevation={0}
                sx={{borderBottom: (theme) => `1px solid ${theme.palette.divider}`}}
            >
                <Toolbar sx={{flexWrap: 'wrap'}}>
                    <Typography variant="h4" color="inherit" noWrap sx={{flexGrow: 1}}>
                        <LinkRouter to="/account/wall" className="site-title">YourQuestion</LinkRouter>
                    </Typography>
                    <nav>
                        <CustomLink to="/account/wall">Wall</CustomLink>
                        <CustomLink to="/account/message">Message</CustomLink>
                        <CustomLink to="/account/notice">Notice</CustomLink>
                        <CustomLink to="/account/friends">Friends</CustomLink>
                        <CustomLink to="/account/profile">Profile</CustomLink>
                    </nav>
                </Toolbar>
            </AppBar>
        </>
    )
}

function CustomLink({to, children, ...props}) {
    return (
        <>
            <Link
                variant="button"
                color="text.primary"
                sx={{ my: 1, mx: 1.5 }}
            >
                <LinkRouter to={to} {...props}>
                    {children}
                </LinkRouter>
            </Link>
        </>
    )
}

My github repository

• javascript
• reactjs

4 Answers 4

You can pass ponent="span" prop to MUI Link ponent like this:

<Link
    ponent="span"
    variant="button"
    color="text.primary"
    href="#"
    sx={{ my: 1, mx: 1.5 }}
>
    <LinkRouter to={to} {...props}>
      {children}
    </LinkRouter>
</Link>

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

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

You can use onClick props

      <Link
        sx={{ color: 'primary.main', cursor: 'pointer' }}
        onClick={() => navigate(ROUTES.login)}
        href="#"
      >
        Sign In
      </Link>

More universal variant, based on Maria Odintsova answer:

import { FC } from 'react'
import { Link as ReactRouterLink, LinkProps } from 'react-router-dom'
import Button, { ButtonProps } from '@mui/material/Button'

export const LinkButton: FC<ButtonProps & LinkProps> = ({
  children,
  ...rest
}) => {
  return (
    <Button ponent={ReactRouterLink} {...rest}>
      {children}
    </Button>
  )
}

Usage:

<LinkButton to="/foo">
  Bar
</LinkButton>