React组件props在Link跳转时失效，URL不更新问题求助

在React项目的Allproducts组件中，props.category第一次用于fetch请求https://fakestoreapi.com/products/category/${props.category}时能正常获取对应分类的商品数据；但第二次将其赋值给变量Afeef作为Link组件的to属性值时，点击链接后URL无变化，无法跳转到目标路径。需求是点击左侧分类链接时，页面跳转到/${对应分类}的路由。

Allproducts组件代码 #

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom';
import './Allproducts.css'
import Categories from './categories.json'
import ForYouItem from './ForYouItem'

export default function Allproducts(props) {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        fetch(`https://fakestoreapi.com/products/category/${props.category}`)
            .then((res) => res.json())
            .then((data) => setProducts(data))
    }, [])
  return (
    <>
    <div className="banner">
        <h1>All Products</h1>
        <h4>Get best items in budget</h4>
    </div>
            <div className="main-grid">
                <div className="left-grid">
                    <div className="left-categories">
                    <h1>Collections</h1>
                    {Categories.map((category) => {
                        let Afeef = `/${props.category}`
                        return (
                            
                          <Link to= {Afeef} className='products-categories'> <h4>{category.title}</h4></Link>


                        )

                    }

                    )}
                    </div>
                </div>

                <div className="right-grid">
                    
                <div className="row ">
                    {products.map((product) => {
                        return (
                            <div className="col-md-4 my-2 Products-1">
                                <ForYouItem Title={product.title.slice(0, 50)} Price={product.price} Imageurl={product.image} rate={product.rating.rate} count={product.rating.count} />
                            </div>


                        )

                    }

                    )}
                    
                   
                    
                </div>
                </div>
            </div>
    </>
  )
}

App.js路由配置代码 #

import React, { Component } from 'react'
import './App.css';

import NavBar from './components/NavBar';
import TopBar from './components/TopBar'
import {
  HashRouter,
  Routes,
  Route,
} from "react-router-dom";
import Mainpage from './Mainpage';
import Login from './components/Login';
import Signup from './components/Signup';
import Allproducts from './components/Allproducts';
function App() {
  return (
    <div>
      <HashRouter>
      <TopBar/>
      <NavBar/>
      <Routes>
      <Route path="/" element={<Mainpage/>}></Route>
      <Route path="/Login" element={<Login/>}></Route>
      <Route path="/Signup" element={<Signup/>}></Route>

      <Route path="/jewelery" element={<Allproducts category="jewelery"></Allproducts>}></Route>
      <Route path="/electronics" element={<Allproducts category="electronics"></Allproducts>}></Route>
      <Route path="/men's clothing" element={<Allproducts category="men's clothing"></Allproducts>}></Route>
      <Route path="/women's clothing" element={<Allproducts category="women's clothing"></Allproducts>}></Route>
      </Routes>
      </HashRouter>
    </div>
  );
}


export default App;

1. 修正Link的跳转路径 #

当前代码中，循环渲染分类链接时，所有Link的to属性都使用了当前组件的props.category（即当前页面的分类，比如在/jewelery页面时，所有链接都指向/jewelery），导致点击后无法切换路由。

需要改为使用循环中当前category项对应的路由路径：

• 若categories.json中每个分类项包含path字段（对应路由路径值，如"jewelery"），则修改为：

let Afeef = `/${category.path}`

• 若categories.json中的category.title与路由路径值一致（如title为"jewelery"），则修改为：

let Afeef = `/${category.title}`

2. 完善useEffect的依赖数组 #

当前useEffect依赖数组为空，切换分类后组件不会重新发起请求获取新分类的数据。需将props.category加入依赖数组：

useEffect(() => {
    fetch(`https://fakestoreapi.com/products/category/${props.category}`)
        .then((res) => res.json())
        .then((data) => setProducts(data))
}, [props.category])

修正后的核心代码片段 #

// ...
useEffect(() => {
    fetch(`https://fakestoreapi.com/products/category/${props.category}`)
        .then((res) => res.json())
        .then((data) => setProducts(data))
}, [props.category])
// ...
{Categories.map((category) => {
    // 根据categories.json结构选择对应字段
    let Afeef = `/${category.path}` // 或 `/${category.title}`
    return (
        <Link to={Afeef} className='products-categories'> 
            <h4>{category.title}</h4>
        </Link>
    )
})}
// ...

内容的提问来源于stack exchange，提问作者Afeef Raza