How to pass props via Link to react-router?

Question

React

Hello everyone, I have two pages. On the first page, there is a simple landing page where there is an input in which when we enter a value and click "find", we go to the second page, where the result is already displayed from json by the value that we set on the first page, but I cannot pass props from the first page to the second.
how i tried to do it:

class SearchLanding extends React.Component{ 
    state = {
        searchValue : '',
    }
    onSearchChange = (event, searchValue) => {
        this.setState({ searchValue });
      };
    render(){  
        const {searchValue} = this.state;
        console.log(searchValue);
        return(
            <Center className={styles.parent} id="search">
                 <Center className={styles.input}>
                        <Input 
                        leftIcon={<Icon name="search" />} 
                        value= {this.state.searchValue}
                        width="700px" 
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                        /> {' '}
                        <Link to="/search"  params={{searchValue:searchValue}}><Button use="primary">Найти</Button></Link> 
                    </Center>
                <div className={styles.more}>
                    <Link to="/search">Смотреть всё</Link>
                </div>
            </Center>  
        );
    }
}

tell me how to do it??

Answer 1

Data from one page to another, via Link is transmitted in this way,
on the first page:

<Link to={{
            pathname: "/search",
            propsSearch: myData
        }}>Ссылка</ Link>

On the "/search" page, the data can be obtained like this:

import React from 'react';
import {Redirect} from 'react-router-dom';

export default function Search(props) {
   console.log(props.location.propsSearch); // Наши переданные данные
   //Но учтите, что они будут доступны только, при переходе по этой ссылке. 
   //Если страницу перезагрузить, то получим - undefined. 
   //Это решается редиректом обратно, если нет пропса:
   if (!props.location.propsSearch) return <Redirect to="/firstpage" />;
...
}

Answer 2

1) Find
either
2) to={{
path: "/search",
query: {searchValue:searchValue}
}} >Find
the second if redux is used

Answer 3

It seems to me that the problem is in the route, check if you have it or not
<Route path="/search/:searchValue" />