Prevent the state information from being erased - ReactJS

Hi, I'm new to reactJS. I create this component where I receive information from a REST API

import React, { Component } from 'react';
import '../Assets/css/grayscale.css';

import { Link } from 'react-router-dom';


class Ligues extends Component {
    constructor(){
        super();
        this.state = {
            ligues: []
        };
    }

    componentDidMount (){
        fetch('http://api.football-data.org/v1/competitions/?season=2017')
            .then(res => res.json())
            .then(res =>{
                this.setState({
                    ligues:res
                });
            })
            .catch(error => {
                console.log('error, desolé')
            })
    }

    render () {
        return (
        <div>
            <header className="ligues">
              <div className="intro-body">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-8 mx-auto">
                      <h1 className="brand-heading">Ligues Football</h1>
                      <a href="" className="btn btn-circle js-scroll-trigger">
                        <i className="fa fa-angle-double-down animated"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </header>
                <h1>Ligues Page</h1>
             <div className="row">
                {this.state.ligues.map(function(p, index){
                    const newTo = { 
                      pathname: "/menu", 
                      param1: p.id,
                      param2: p.caption,
                      param3:p.currentMatchday,
                      param4:p.numberOfMatchdays,
                      param5:p.numberOfTeams,
                      param6:p.numberOfGames,
                      param7:p.lastUpdated 
                    };
                    return(
                        <div className="col-md-3 centered" key={p.id}>
                            <div className="hello">
                              <img className="ing" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="Card image cap"/>
                              <div className="card-body">
                                <h5 className="card-title black"> {p.caption} </h5>
                                <Link to={newTo} className="btn btn-primary">GO somewhere</Link>
                              </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
        );
    }
}

export default Ligues;

In this component I receive the props I sent from the first component

import React, { Component } from 'react';
import '../Assets/css/grayscale.css';
import { Card, CardTitle, CardText } from 'reactstrap';
import { Link } from 'react-router-dom';

class menuLigues extends Component {
    constructor(props){
            super(props)
            this.state = {
                ide: '',
                caption: '',
                currentMatchday: '',
                numberOfMatchdays: '',
                numberOfTeams: '',
                numberOfGames: '',
                lastUpdated: '',
                cont: "true"
            };
    }

    componentDidMount(){
        if(this.state.cont === "true"){
            this.setState({
                id: this.props.location.param1,
                caption: this.props.location.param2,
                currentMatchday: this.props.location.param3,
                numberOfMatchdays: this.props.location.param4,
                numberOfTeams: this.props.location.param5,
                numberOfGames: this.props.location.param6,
                lastUpdated: this.props.location.param7,
                cont:"false"
            });
        }else{
            console.log("Ya se hizo")
        }

    }
//this.props.match.params.id

    render () {
            var validationMatch;
            if(this.props.location.param3 === this.props.location.param4){
              validationMatch=<div className="col-md-6"><Card body inverse color="danger"><CardTitle>{this.props.location.param4}</CardTitle><CardText>Nombre total de matchs à jouer</CardText></Card></div>
            }else{
              validationMatch=<div className="col-md-6"><Card body inverse style={{ backgroundColor: '#73668E', borderColor: '#73668E' }}><CardTitle>{this.props.location.param4}</CardTitle><CardText>Nombre total de matchs à jouer</CardText></Card></div>
            }

            const newTo = { 
              pathname: "/match", 
              md: 23
            };
        return (
        <div>
            <header className="ligues">
              <div className="intro-body">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-8 mx-auto">
                      <h1 className="brand-heading">{this.props.location.param2}</h1>
                      <a href="" className="btn btn-circle js-scroll-trigger">
                        <i className="fa fa-angle-double-down animated"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <h3>Details de </h3>
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <div className="row">
                        <div className="col-md-6 margin-g" >
                            <Card body inverse color="success">
                                <CardTitle>{this.props.location.param5}</CardTitle>
                                <CardText>Nombre d'équipes</CardText>
                            </Card>
                        </div>
                        <div className="col-md-6 margin-g">
                            <Card body inverse color="info">
                                <CardTitle>{this.props.location.param6}</CardTitle>
                                <CardText>Nombre de matchs</CardText>
                            </Card>
                        </div>

                        <div className="col-md-12">
                            <Card body inverse color="warning">
                                <CardTitle>{this.props.location.param7}</CardTitle>
                                <CardText>Dernière mise à jour</CardText>
                            </Card>
                        </div>
                    </div>
                </div>


                <div className="col-md-6">
                    <div className="row">
                        <div className="col-md-6">                          
                            <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
                                <CardTitle>{this.state.currentMatchday}</CardTitle>
                                <CardText>Journée actuelle</CardText>
                            </Card>
                        </div>
                        {validationMatch}
                    </div>

                </div>
            </div>
        </div>
<br/>

             <div className="row centered">
                <div className="col-md-4">
                    <div className="card centered" style={{width: '18rem'}}>
                      <img className="ing card-img-top" src="http://tse3.mm.bing.net/th?id=OIP.6GlqGF3jamVbBGlT-3ctsAHaHa" alt="Card image cap"/>
                      <div className="card-body">
                        <h5 className="card-title" style={{color: 'black'}}>Le classement de la ligue</h5>
                        <p className="card-text" style={{color: 'black'}}>Connaisez le classement de la ligue.</p>
                      </div>
                      <div className="card-body">
                       <Link to={'/table/${this.props.location.param1}'} className="btn btn-primary">Regardez</Link>
                      </div>
                    </div>
                </div>

                <div className="col-md-4">
                    <div className="card centered" style={{width: '18rem'}}>
                      <img className="ing card-img-top" src="https://www.vipleague.lc/android-chrome-192x192.png" alt="Card image cap"/>
                      <div className="card-body">
                        <h5 className="card-title" style={{color: 'black'}}>Les matchs de la ligue</h5>
                        <p className="card-text" style={{color: 'black'}}>Regardez les matchs joués et leur resultats.</p>
                      </div>
                      <div className="card-body">
                        <Link to={'/matchs/${this.props.location.param1}'} className="btn btn-primary">Go</Link>
                      </div>
                    </div>
                </div>


                <div className="col-md-4">
                    <div className="card centered" style={{width: '18rem'}}>
                      <img className="ing card-img-top" src="http://kaptivasportsacademy.com/wp-content/uploads/2016/05/team-icon-1.png" alt="Card image cap"/>
                      <div className="card-body">
                        <h5 className="card-title" style={{color: 'black'}}>Equipes de la ligue</h5>
                        <p className="card-text" style={{color: 'black'}}>Connaisez les equipes qui font partie de la ligue.</p>
                      </div>
                      <div className="card-body">
                       <Link to={'/details/${this.props.location.param1}'} className="btn btn-primary">Go</Link>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        );
    }
}

export default menuLigues;

The component's state stores the information and shows it, but when I go to another component and want to go back to this component, I refresh the page

the information no longer exists

.I would like to understand why this happens and some way to keep the information in the component