Программная ссылка на Компонент с Props in React (Хуки) - PullRequest
Новая
       22

Программная ссылка на Компонент с Props in React (Хуки)

1 голос
/ 28 апреля 2020

Я пытаюсь перенаправить на компонент после нажатия. Мне нужно отправить это состояние или реквизит.

Я могу сделать это с помощью компонента Link; ie

<Link to={pathname: '/messages', state: { id: post.id}} ...

это перенаправляет на Компонент, и я могу получить состояние от местоположения в новом компоненте.

Однако , мне нужно выполнить какое-то действие сначала нажмите, поэтому я не могу (или не знаю, как) программно перенаправить с помощью состояния / реквизита.

Я могу использовать 

.....

history = useHistory()
function func() 
{
     //send ajax request
     history.push()
}

....

<button onClick={func}....>Save Todo</button>

, который приведет меня к компоненту , но мне нужно также передать идентификатор.

Есть ли способ сделать это?

Спасибо

1 Ответ

1 голос
/ 28 апреля 2020

Использование Использование истории . Сделайте history.pu sh и предоставьте объекту pathname и data, которые необходимо передать компоненту для перенаправления. 

...
history = useHistory()
const handleClick = () => {    
    apiService('myEndpoint')
        .then(response => {
           history.push({
             pathname: '/myPath',
             state: { id: response.data.id } // <----- send your id here
        });
    }
}

В принимающем компоненте: 

    ...
    useEffect(() => {
       console.log(props.location.customNameData);
    }, []);

Примечание: Вы также можете использовать useLocation 

import { useLocation } from "react-router-dom";
console.log(location.state.id);
...