redirect onclick event in react using react-router-dom

Question

I want to go to other pages in my react project using a router-react-dom. I created a function like this:

const {id} = props;
  const redirect = () => {
    console.log("redirecting...");
    const url = `/${id}`;
    return <Redirect to={url} />;
  };

Then I make props to other component like this:

      <BtnDetalii
        clickFn={redirect}
        text="apasa aici pentru mai multe detalii"
      />

and this is my btnDetalii component

const BtnDetalii = props => (
  <div onClick={() => props.clickFn()} className="detalii">
    {props.text}
  </div>
);

When I click the buton doesn't work. What I missed?

@Cosmin Ciolacu can you share your complete code in sandbox? or i posted solution check that i hope it helps — akhtarvahid
– akhtarvahid, Commented Dec 3, 2019 at 9:03

gergana · Accepted Answer · 2019-12-03 09:32:13Z

You can use React Router v4. Wrap your component with withRouter from react-router-dom and this way you can access history prop. After that you can push new url to your history prop.

I am not sure what is your code in the parent component where your redirect function is, but this is a simple example using withRouter. If you share more of your component I can change the snippet and add your code.

import React from "react";
import { withRouter } from "react-router-dom";
import BtnDetalii from "./BtnDetalii";

const Card = withRouter(({ history, ...props }) => {
    const redirect = () => {
        console.log("redirecting...");
        const id = props.id;
        const url = `detalii/${id}`;
        history.push(url);
    };
    return (
        <div className="today">
        <div className="data">{props.nume}</div>
        <img src={props.poza} className="img-icon" alt="poza" />
        <p className="text">{props.strada}</p>
        <BtnDetalii
            clickFn={redirect}
            text="apasa aici pentru mai multe detalii"
        />
        </div>
    );
});

export default Card;

ok but I work with a functional components not with class-based components
I will change it to function based component, can you add your component code ?

akhtarvahid · Accepted Answer · 2019-12-03 09:41:02Z

0

Check this example for functional component and you can go through documentation for better understanding.

React router dom for functional component

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

edited Dec 3, 2019 at 9:41

answered Dec 3, 2019 at 9:02

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

5 Comments

Cosmin Ciolacu Over a year ago

for me it shows TypeError: Cannot read property 'push' of undefined

Gyepesto Over a year ago

Did you add history: MemoryHistory; to your props?

akhtarvahid Over a year ago

@CosminCiolacu are you using class based or function based component?

Cosmin Ciolacu Over a year ago

I use function-based component

akhtarvahid Over a year ago

@CosminCiolacu then it won't work. why don't you wrap your button in Link. it's another way to redirect

Collectives™ on Stack Overflow

redirect onclick event in react using react-router-dom

2 Answers 2

2 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Related