머티리얼 UI 리액트 버튼이 리액트 라우터 돔 링크 역할을 하도록 하는 방법

머티리얼 UI 리액트 버튼이 리액트 라우터 돔 링크 역할을 하도록 하는 방법

머티리얼 UI를 반응시키는 방법Button컴포넌트가 역할을 하다Link원래 스타일을 잃지 않고 리액트 컨트롤 돔의 컴포넌트를 사용할 수 있습니까?클릭해서 경로를 변경하는 것처럼요.

import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
    About Page
</Button>

이런 거에 대해서 원본을 유지하는 건Button스타일:

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

<Button variant="contained" color="primary">
    <Link to="/about">
        About Page
    </Link>
</Button>

좋아요, 이건 아주 쉬워요. 왜 나한테 안 먹혔는지 모르겠어요.

이렇게 하면 됩니다.

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

<Button component={Link} to="/about" variant="contained" color="primary">
  About Page
</Button>

자세한 것은, https://mui.com/material-ui/guides/routing/ 를 참조해 주세요.

MUI 5는 이를 더욱 단순화했습니다.MUI를 제공하기만 하면Button와 함께hrefAtribute는 다음과 같습니다.

import Button from '@mui/material/Button';


<Button href="/" variant="contained">
  Link
</Button>

포장해야 합니다.<Button />내부<Link />요소.

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

const ButtonWithLink = () => (
  <Link to="/about">
   <Button variant="contained" color="primary">
     About Page
   </Button>
  </Link>
)

넌 날 위해 일했어

import Button from '@material-ui/core/Button';
import { useHistory } from 'react-router-dom';

const YourComponentName = () =>{

    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <Button 
         variant="contained" 
         color="primary" 
         onClick={() => handleRoutes('/about')}>
         About Page
      </Button>
      ...
    </>
)
}

@brandonscript의 코멘트에 의하면, MUI 5 메뉴얼에서는, 테마를 작성해 컴포넌트를 1 회 설정하는 방법에 대해 설명하고 있습니다.

import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
import { LinkProps } from '@mui/material/Link';

const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (MUI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: LinkBehavior,
      } as LinkProps,
    },
    MuiButtonBase: {
      defaultProps: {
        LinkComponent: LinkBehavior,
      },
    },
  },
});

언급URL : https://stackoverflow.com/questions/51642532/how-to-make-a-material-ui-react-button-act-as-a-react-router-dom-link