DanilAndreevich
@DanilAndreevich

Как передать props через Link в react-router?

Всем привет, у меня есть две страницы . На первой странице идет простой лендинг где есть input в котором когда мы вводим значение и нажимаем " найти " , мы переходим на вторую страницу где уже выводится результат из json по value которое мы задали на первой странице, но я не могу передать props с первой страницы во вторую.
как пытался сделать :
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>  
        );
    }
}


подскажите как это можно сделать??
  • Вопрос задан
  • 5197 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Pirantul
Frontend-разработчик
Данные из одной страницы в другую, через Link передаются таким образом,
на первой странице:
<Link to={{
            pathname: "/search",
            propsSearch: myData
        }}>Ссылка</ Link>

На странице "/search" данные можно достать так:
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" />;
...
}
Ответ написан
Комментировать
DarthJS
@DarthJS
1) Найти
либо
2) to={{
path: "/search",
query: {searchValue:searchValue}
}} >Найти

второй если redux используется
Ответ написан
freislot
@freislot
Frontend-разработчик
Мне кажется проблема в роуте проверьте так у вас или нет
<Route path="/search/:searchValue" />
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы