ReactRouter在更新URL（UseNavigate或Link）后不會重新呈現頁面

我有一個使用 React 和 React Router 構建的購物網站，每個產品都有一個主購物頁面和一個產品頁面，產品頁面有一個下一頁按鈕呼叫

const handleNext = () => {
  navigate(`/shop/product/${product.id   1}`, { replace: true })
}

URL 更改但頁面不會重新呈現并停留在同一產品上，如果我手動重繪 頁面，頁面會更新。

我也嘗試過使用它做同樣的事情

<Link to=`/shop/product/${product.id   1}`>Next</Link> 

雖然當我重新路由到'/home'或'/contact'它的作業原理。

RouteSwitch.JS

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./components/Homepage/Homepage";
import ShoppingPage from "./components/ShoppingPage/ShoppingPage";
import Nav from "./components/Nav/Nav";
import Contact from "./components/Contact/Contact";
import ProductPage from "./components/ProductPage/ProductPage";
import Checkout from "./components/Checkout/Checkout";

const RouteSwitch = (props) => {
  const { cart, setCart } = props.props;

  return (
    <BrowserRouter>
      <Nav cart={cart} />
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route path="/shop" element={<ShoppingPage />} />

        <Route
          exact
          path="/shop/product/:id"
          element={<ProductPage props={{ setCart, cart }} />}
        />

        <Route path="/contact" element={<Contact />} />
        <Route
          path="/checkout"
          element={<Checkout cart={cart} setCart={setCart} />}
        />
      </Routes>
    </BrowserRouter>
  );
};

export default RouteSwitch;

ProductPage.js

import { useLocation, useParams, useNavigate, Link } from "react-router-dom";
import { useEffect, useState } from "react";
import './ProductPage.css'
import data from "../toy-api/data"
import ProductMenu from "../ProductMenu/ProductMenu"

const ProductPage = (props) => {
  const { setCart, cart } = props.props;

  const getProdByID = (id) => data.find((item) => item.id === parseInt(id));
  const navigate = useNavigate();
  const params = useParams();
  const location = useLocation();
  const [product, setProduct] = useState({});
  const { fromShopRoute = false, prodProps = errorObj } = location.state || {};

  // Use Effect that runs when the COMP mounts
  useEffect((e) => {

      let _product = getProdByID(params.id);

      if (_product !== undefined) {
        setProduct(_product);
      }
      // If the search returns undefined it will set the Product
      // to an errorObj and reroute the user to shop page
      else {
        setProduct(errorObj);
        navigate("/shop");
      }
    }
  }, []);


  const handleNext = () => {
    navigate(`/shop/product/${product.id   1}`, { replace: true })
  }

  return (
    <div>
      <div className="product-page-container">

        <div className="product-header">
          <h1>{product.name}</h1>
          <ProductMenu
            setCart={setCart}
            product={product} 
            setProduct={setProduct}
            cart={cart}
          >
          </ProductMenu>
        </div>


        <div className="img-container">
 
          <img
            className="product-img"
            loading="lazy"
            src={product.src}
            alt={product.name}
          />

          <div onClick={handleNext} className="slide-btn ">
            Next
          </div>

        </div>



      </div>

    </div >
  );
};

export default ProductPage;

我嘗試了各種“UseNavigate(0)”和使用 useEffect 觀察 params.id 的其他方法，但我發現它們是雜亂無章的解決方案，沒有給我所需的目標。

uj5u.com熱心網友回復：

當路由路徑匹配并且只有路徑引數發生變化ProductPage時，仍然安裝。"/shop/product/:id"id

useEffect獲取資料的鉤子取決于id路由路徑引數。

const { id } = useParams();

// Use Effect that runs on initial render and when id updates
useEffect(() => {
  let _product = getProdByID(id);

  if (_product !== undefined) {
    setProduct(_product);
  } else {
    // If the search returns undefined it will set the Product
    // to an errorObj and reroute the user to shop page
    setProduct(errorObj);
    navigate("/shop");
  }
}, [id]); // <-- add id dependency

標籤：javascript反应反应路由器反应路由器dom

上一篇：選擇后如何從狀態中取消選擇值

下一篇：使用htaccess從url獲取引數