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，link 我到 './Form'。我正在尝试 <Button onClick={e => <Link to=".Form"/>} 之类的东西，并尝试了我能想到的所有变体来完成这项工作。请有人帮忙，谢谢。

Answer 1

你可以这样做

  const history = useHistory();
  const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');

  return (
   <div>
   <button onClick={navigateTo} type="button" />
   </div>
  );

Answer 2

我认为你需要使用 component attribute :

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

Answer 3

您可以使用 React 路由器 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>
    );
};

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

React Router v6, How to place <Link /> into a button and event handler

reactjs

react-router

material-ui

react-router-dom