react中使用Link在不同路由之间进行参数传值

在项目中，遇到了点击获取数据并跳转页面的情况，刚开始是将数据放在reducer中，然后在新的页面中使用，但是页面刷新之后数据为空,也是挣扎了很久。后来在网上查找解决方法，发现使用Link在不同页面间参数传值。
具体实现如下：

• 定义路由：

<Route path='/task' component={TaskDetail}/>

• taskItem.js中传递数据

import React from 'react';
import {Link} from 'react-router-dom';
class TaskItem extends React.Component{

    render(){
        let data = this.props.task;
        let path = {
            pathname:'/task',
            state:data//要传递的数据
        };
        return (
            <div>
                <div className="item">
                    <div>
                        <Link to={path}><p style={{'fontSize': '20px'}}>{this.props.name}</p></Link>
                         //Link实现跳转，同时传递数据
                        <p>简介：{this.props.intro}</p>
                    </div>
                </div>
            </div>

        )
    }
}

• taskDetail.js接收数据

import React from 'react';
class TaskDetail extends React.Component {
    render() {
        let data = this.props.location.state;  
        //data存放传递过来的参数
        let {task_id, task_name, task_maker, task_introduction, task_time, count} = data;
        //对象解构赋值
        return (
            <div>
                <div id="taskDetail">
                    <div className="author">
                        <img id="img" src="../images/photo.jpg"/>
                        <div className="name">
                            <a>创建人：{task_maker}</a>
                        </div>
                    </div>
                    <div>
                        <p style={{'fontSize': '20px'}}>任务名称：{task_name}</p>
                        <span>创建时间：{task_time}</span>
                        <span>参与人数：{count}</span>
                        <p>简介：{task_introduction}</p>
                        <button>修改</button>
                    </div>
                </div>
            </div>
        )
    }
}