React Router v6，如何将 <Link /> 放入按钮和事件处理程序中

Question

我正在尝试这样的东西：

import Button from '@material-ui/core/Button';
import { Link } from "react-router-dom";
return (
<div className="App">
<header className="App-header">
<Button
variant="contained"
color="secondary"
// THIS HERE:
onClick={<Link to="./Form"/>}
>
CLICK
</Button>

我需要：<Button />，点击一下，将我链接到/表单"。我正在尝试类似<Button onClick={e => <Link to=".Form"/>}的东西，并尝试了我能想到的每一种变体来实现这一点。请有人帮忙，谢谢。

Answer 1

您可以使用react router dom包中的useNavigate钩子。

import { useNavigate } from "react-router-dom";
import {Button} from "@mui/material"
export const TestComponent = () => {
const navigate = useNavigate();
return (
<Button onClick={() => navigate('route here...')}>Click me!</Button>
);
};

Answer 2

我认为您需要使用component属性：

<Button component={Link} to="./Form"
variant="contained"
color="secondary"
>
CLICK
</Button>

Answer 3

你可以这样做

const history = useHistory();
const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');
return (
<div>
<button onClick={navigateTo} type="button" />
</div>
);

Answer 4

只需使用LinkClickHandler

const ButtonLink = ({to, children, ...rest}) => {
const handleClick = useLinkClickHandler(to);
return (
<button onClick={handleClick} {...rest}>
{children}
</button>
);
};