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

【问题标题】：React Router v6, How to place <Link /> into a button and event handlerReact Router v6，如何将 <Link /> 放入按钮和事件处理程序中
【发布时间】：2022-01-04 16:54:01
【问题描述】：

我正在尝试这样的事情：

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"/>} 之类的东西，并尝试了我能想到的所有变体来完成这项工作。请有人帮忙，谢谢。

【问题讨论】：

这个有帮助吗stackoverflow.com/questions/42463263/…
@cmgchess 天哪...是的。谢谢你。我在一个新兵训练营中，正在努力通过。
一切顺利！快乐编码

标签： reactjs react-router material-ui react-router-dom

【解决方案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>
    );
};

【讨论】：

【解决方案2】：

我认为您需要使用 component attribute ：

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

【讨论】：

谢谢，这很有帮助。对于我尝试了相同的方法，“component={Link}”，但这不起作用。如何使 onSubmit 触发更改？是否有我遗漏的东西，因为我在 MUI 的文档或 React-Router v6 的文档中的任何地方都看不到这一点。
使用 onsubmit 您将不得不使用一个在其中调用 history.push() 的函数。文本字段不应该像链接一样，因此该功能不存在。这就是组件属性不起作用的原因
好的，非常感谢。
当然。如果对您有帮助，请将其标记为已接受的答案（绿色勾号）

【解决方案3】：

你可以这样做

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

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

【讨论】：