React Component does not render when clicking CardActionArea from Material UI - reactjs

Question

I'm running into a weird issue that I've never run into before.
I'm using Material UI components, specifically CardActionArea paired with
Redirect from react-router-dom
Upon clicking the CardActionArea I want to redirect my users to a detail screen of the component they just clicked.
The detail view sometimes renders and sometimes it doesn't. For example, if I click on the CardActionArea the detail view does not render, but if I navigate directly to the URL, the detail view does render.
This is the relevant code:
// Dashboard.js
return (
<Grid container spacing={40} className={classes.root}>
<TopMenu></TopMenu>
<Router>
<Route exact path="/dashboard/v/:videoId" component={VideoDetail} />
</Router>
<Router>
<Route exact path="/dashboard" component={(YouTubeVideoGallery)} />
</Router>
</Grid>
);
The CardActionArea is here:
constructor(props) {
super(props);
this.state = {
redirect: false
};
this.handleCardActionClick = this.handleCardActionClick.bind(this);
}
handleCardActionClick = () => {
this.setState({redirect: true});
}
render() {
const { classes } = this.props;
const date = moment(this.props.video.publishedAt);
if (this.state.redirect) {
return (<Redirect to={`/dashboard/v/${this.props.video.id}`} />)
}
return (
<Card className={classes.card}>
<CardActionArea onClick={this.handleCardActionClick}>
<CardHeader
title={
(this.props.video.title.length > 21) ?
this.props.video.title.substr(0, 18) + '...' :
this.props.video.title
}
subheader={`${date.format('MMMM DD[,] YYYY')} - Views: ${this.props.video.viewCount}`}
/>
<CardMedia
className={classes.media}
image={this.props.video.thumbnails.medium.url}
title={this.props.video.title}
/>
</CardActionArea>
</Card>
);
}
I'm not really sure what the problem is.

Answer 1

First thing handleCardActionClick is an arrow function so you no need to do binding in constructor. That can be removed
To redirect on onclick do something like below
render(){
const url = `/dashboard/v/${this.props.video.id}`;
return(
<div>
{this.state.redirect && <Redirect to={url} />}
</div>
)
}