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 />，通过 onClick 将我链接到“./Form”。我正在尝试类似的事情<Button onClick={e => <Link to=".Form"/>}，并且已经尝试了我能想到的所有变体来使这项工作成功。请有人帮忙，谢谢。

Answer 1

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

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>