当我单击浏览器时，UseEffect不再运行

Question

我在产品页面上有一排鞋类品牌徽标，例如耐克，阿迪达斯等。该行下方是我们所有鞋子库存的图像。当用户单击某个品牌（例如耐克）时，URL更改为/ nike并过滤图像以仅显示耐克鞋。然后，如果我单击Adidas，URL更改为/ adidas并过滤以仅显示adidas鞋子。但是，当我在浏览器上单击“后退”按钮时，URL将更改回/ nike，但图像仍为adidas。我可以使用useEffect对brandId进行任何更改，该更改是用于过滤鞋子的道具。

这是我的代码：

import React, { useState, useEffect} from 'react'
import "../styles/ShoesPage.css"
import "../styles/Players.css"
import { Link } from 'react-router-dom'
import Axios from 'axios'


export default props => {
    const brandId = props.match.params.brand
    const [shoes, setShoes] = useState([])

    useEffect(() =>{

        Axios.get(`/shoes/brands/+${brandId}`).then(res=>
            setShoes(res.data)
        )

    }, [brandId])

    return (
        <>


        <div id="playercontainer">
            {shoes.map((shoe, i) => (
                <Link to={"/product/" + shoe.id} key={'shoe' + i}>
                    <div className="player">
                        <img className="shoeImg" src={`${shoe.pic}`} alt="" />
                        <div className="playerDesc">
                            <div className="teamName">{shoe.brand}</div>
                            <div className="playerName">{shoe.shoe}</div>   
                            <div className="shoePrice">${shoe.price}</div>
                        </div>
                    </div>
                </Link>
            ))}

        </div>
        </>
    )
}