How to transfer state through Link in react-dom 5.0? - reactjs

Question

I develop react-app for the first time in my career.
So, I wander about a lot of things...haaa
I try to pass state between componet through Link element
But I did typing another variable syntax.
But I always see state: null on the console.
And There are many error message 'can't read state'
<Link to={{pathname:"/movie-detail", state:{year:year, title:title, summary:summary, poster:poster, genres:genres}}}>~~~</Link>
<Link to={"/movie-detail"} state={{year:year, title:title, summary:summary, poster:poster, genres:genres}}>~~</Link>
But I can't move state recipient component.
Please teach me that what is wrong with my code...
Hading over code.
import React from 'react'
import PropTypes from 'prop-types';
import './Movie.css';
import { Link } from 'react-router-dom';
function Movie({year, title, summary, poster, genres}){
return (
<div className="movie">
<Link to={"/movie-detail"} state={{year:year, title:title, summary:summary, poster:poster, genres:genres}}>
<img src={poster} alt={title} title={title}/>
<div className="movie__data">
<h3 className="movie__title" style={{backgroundColor:'red'}}>{title}</h3>
<h5 className="movie__year">{year}</h5>
<ul className="movie__genres">
{genres.map((genres, index) => {
return (
<li key={index} className="movie__genre">{genres}</li>
);
})}
</ul>
<p className="moive__summary">{summary.slice(0,180)}...</p>
</div>
</Link>
</div>
);
}
Movie.propTypes = {
id:PropTypes.number.isRequired,
year:PropTypes.number.isRequired,
title:PropTypes.string.isRequired,
summary:PropTypes.string.isRequired,
poster:PropTypes.string.isRequired,
genres:PropTypes.arrayOf(PropTypes.string).isRequired,
}
export default Movie;
Recipient Code
import React from 'react';
class Detail extends React.Component{
componentDidMount(){
const{location, history} = this.props;
//console.log(this.props);
if(location.state === undefined){
history.push('/');
}
}
render() {
const{location} = this.props;
if(location.state){
return(
<span>{location.state.title}</span>
);
}else{
return null;
};
}
}
export default Detail;

Answer 1

Link component has a to prop which can be string, object and function. So the correct code is:
<Link to={{ pathname: '/movie-detail', state: { year: year, title: title, summary: summary, poster: poster, genres: genres } }}>~~~</Link>
Try using withRouter HOC wrap your Detail component so that you can get the location and history objects from the props.

Answer 2

I would not recommend using your router to pass data.
Ideally you'll want to fetch data from within your details page based off of the given route
(e.g. /movie/star-wars fetches data for post "star-wars" from your server). By separating your router and component logic you maintain your application's modularity.