Как изменить состояние через ссылку response-router-dom?

Question

Я пытаюсь изменить состояние с помощью компонента «Ссылка», когда нажимаю на изображение. Я не уверен, так ли написан компонент Link или неправильно используется, но консоль регистрирует состояние как истинное даже после того, как я щелкаю по нему.

      import React, {useState, useEffect} from 'react'
import {Link, Switch, Route} from 'react-router-dom'
import RecipePage from './RecipePage'
export default function Recipes({dataArray}){

const [strMeal, setStrMeal] = useState(true)

function clickHandler(){
    setStrMeal(false)
}




return(
    <div>
        <Link to={{pathname:'/recipepage', state: {strMeal: strMeal} }}>
            <div onClick={() => clickHandler()}>This is an image</div>
        </Link>
    </div>
    
)

}

Как мне изменить состояние на false?

Answer 1

Рекомендуется использовать обработчик onClick на <Link /> сам компонент:

<Link to={{pathname:'/recipepage', state: {strMeal: strMeal} }} onClick={(e) => clickHandler(e)}>

Теперь вам также необходимо предотвратить поведение ссылки по умолчанию:

      function clickHandler(e){
    e.preventDefault()
    setStrMeal(false)
}

---

Но я не уверен, почему вы хотите это сделать? Поскольку ссылка используется для перехода по указанному вами пути. Итак, я думаю, ты хочешь что-нибудь сделать на /recipepage:

Итак, вы получите имя пути или даже указанное вами состояние и сделаете что-нибудь с этим в компоненте.

Answer 2

У меня такая же проблема. Вы смогли ее решить? Когда я пытаюсь установить состояние с помощью события onCLick в Link, кажется, что он не может изменить переменную состояния.