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

Question

[Brake Made]

Всем привет, у меня есть две страницы . На первой странице идет простой лендинг где есть 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>  
        );
    }
}

подскажите как это можно сделать??

Comments

[davidnum95]

Ну а где код второго компонента?

[Brake Made]

davidnum95, Павел Антонов ,

class InputResult extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
          searchValue: '',
        };
      }

    componentDidMount(){
        fetch("http://localhost:8080/api/users?offset=0&count=15")
        .then(res => res.json())
        .then(
          (result) => {
            this.setState({
              isLoaded: true,
              items: result.items
            }
          );
          },
          (error) => {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
        .catch(error => console.log('parsing failed', error)); 
    }

    onSearchChange = (event, searchValue) => {
      this.setState({ searchValue });
    };

    onSearchClick = () => {
      const { searchValue } = this.state;
      fetch("http://localhost:8080/api/users/?name="+searchValue)
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result.items
        }
      );
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
    .catch(error => console.log('parsing failed', error));
}
    onSearchPress = (e) => {
        if (e.key === 'Enter'){
        this.onSearchClick();
    }
  }
    render() {
        const { items, error , isLoaded, searchValue} = this.state;
        console.log(searchValue);
        return (
            <div>
            <div className={styles.parentResult}>
              <Center>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                        onKeyPress={this.onSearchPress}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
              </Center>
            </div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

export default InputResult;

Answer 1

[Ruslan Gilazov]

Данные из одной страницы в другую, через 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" />;
...
}

Answer 2

[RonomRill]

[ 2022 год ]

Единственный вариант передать параметры через Link, используя библиотеку react-router v.6.3.0 описан здесь - https://ui.dev/react-router-pass-props-to-link

Код на случай блокировки сайта в России:

<Link to="/onboarding/profile" state={{ from: "occupation" }}>
  Next Step
</Link>

<code lang="javascript">
import { useLocation } from 'react-router-dom'

function Profile () {
  const location = useLocation()
  const { from } = location.state

  return (
    ...
  )
}
</code>

Answer 3

[DarthJS]

1) Найти
либо
2) to={{
path: "/search",
query: {searchValue:searchValue}
}} >Найти

второй если redux используется

Comments

[Brake Made]

DarthJS у вас в 1. пункте ничего нет . Redux не используется

Answer 4

[Павел Антонов]

Мне кажется проблема в роуте проверьте так у вас или нет
<Route path="/search/:searchValue" />

Comments

[Brake Made]

при указании :searchValue
у меня в принципе страница не открывается , она полностью пустая

[Павел Антонов]

Данил Угрик, а версия роутера какая?

[Brake Made]

Павел Антонов, 4.2

[Brake Made]

Павел Антонов, в комментариях так же поместил код страницы результата , вот код роутера :

ReactDOM.render(
    <BrowserRouter>
        <Switch>
        <Route exact path="/" component={App}/>
        <Route path="/search" component={SearchTable}/>
        </Switch>
    </BrowserRouter>
, document.getElementById('root'));

[xenia19]

Brake Made, как Вам удалось решить эту проблему?