如何通过react路由器dom链接更改状态

Question

单击图像时，我正试图通过链接组件更改状态。我不确定Link组件是如何编写的，或者clickHandler是否被错误使用，但即使在我点击它之后，它控制台也会将状态记录为true。

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

建议在<Link />组件本身上使用onClick处理程序：

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

现在，您还需要防止链接的默认行为：

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

---

但我不确定你为什么要这么做？由于，链接用于转到您提供的路径。所以，我想你想在/recipepage:上做点什么

因此，您将获得路径名，甚至是您提供的状态，并在组件中使用该路径名进行操作。