React Router v6, How to place into a button and event handler

Question

I'm trying something like this:

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>

I need: <Button />, with an onClick, to link me to './Form'. I am trying something like <Button onClick={e => <Link to=".Form"/>} and have tried every variation I can think of to make this work. Please someone help, and thanks.

does this help https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button — cmgchess, Jan 04 '22 at 16:56
@cmgchess jeez... yes it does. Thank you. I'm in a boot camp and clawing my way through. — Michael, Jan 04 '22 at 17:04

score 10 · Answer 1 · edited Jul 13 '22 at 05:16

10

You can use useNavigate hook from react router dom package.

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>
    );
};

edited Jul 13 '22 at 05:16

Ankit Saxena

1,067
1
4
16

answered Mar 25 '22 at 07:05

Aakash Basnet

134
1
5

score 7 · Accepted Answer · answered Jan 04 '22 at 17:02

7

I think you need to use the component attribute :

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

answered Jan 04 '22 at 17:02

Tushar Shahi

16,452
1
18
39

Thanks, this is helpful. For I tried the same, "component={Link}" but this did not work. How can i make an onSubmit trigger a change for a ? Is there something I'm missing because I don't see this anywhere in MUI's docs or in React-Router v6's docs. – Michael Jan 04 '22 at 17:14
With onsubmit you will have to use a function which calls history.push() inside it. Textfield are not supposed to act like links, hence the functionality is not there. That is why the component attribute is not working – Tushar Shahi Jan 04 '22 at 17:16
Ok, thank you so very much. – Michael Jan 04 '22 at 17:32
Sure. If it helps you please mark this as the accepted answer(green tick) – Tushar Shahi Jan 04 '22 at 17:32

score 2 · Answer 3 · answered Jan 04 '22 at 17:00

2

You can do it this way

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

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

answered Jan 04 '22 at 17:00

Bartosz Różycki

78
6

Just do not forget to add `history` into your dependencies in case `react-router` will stop using in in the future. – Igor Sukharev Aug 18 '23 at 10:28

score 0 · Answer 4 · answered Aug 18 '23 at 10:37

0

Just useLinkClickHandler

const ButtonLink = ({to, children, ...rest}) => {
  const handleClick = useLinkClickHandler(to);

  return (
    <button onClick={handleClick} {...rest}>
      {children}
    </button>
  );
};

answered Aug 18 '23 at 10:37

Igor Sukharev

2,467
24
21

React Router v6, How to place into a button and event handler

4 Answers4