Unable to redirect a component with react-router-dom

Question

I have been trying to redirect to ProductId Component when there is a click on div with a className= "card" <div className="card" onClick={()=>CallComponent(_id)}>

The function CallComponent is:

CallComponent = (_id) => {
   console.log("Clicked");
   <Link to="/productnew">
   </Link>;
   <Route path="/productnew" component={ProductId}></Route>
};

When there is a click on card "Clicked" is seen in the console but the component is not routed

So basically you have to navigate to `/productnew` when you click the div correct? — Giovanni Esposito, Aug 04 '21 at 12:18
I think this will help [React routing onClick](https://stackoverflow.com/questions/51393153/react-routing-redirect-onclick) — Mike, Aug 04 '21 at 12:19

score 0 · Answer 1 · answered Aug 04 '21 at 12:29

To programmatically navigate to /productnew route you could use Redirect in combination with a state variable. Something like:

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

...

state = { redirect: null };

CallComponent = (_id) => {
   console.log("Clicked");
   this.setState({ redirect: "/productnew" });
};


render() {
  if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />
  }
  return(
  // Your Code goes here
  )
}

This is an intersting article if you want read more about this topic.

Unable to redirect a component with react-router-dom

1 Answers1