v2.5.2
Giriş yap

useParams React

polev
316 defa görüntülendi

Merhaba, Tayfun hocanın React-Router 2 videosunda bulunan useParams dersini izledim.Url içerisinde parametre değişikliği sağlıyor ancak seo tipi urllerde input girilen değeri url içerisinde bulunan :id değerini nasıl güncelleyebilirim ?

import React from "react";
import { Nav, NavLink, Bars, NavMenu } from "./NavBarComponent";
import { useParams, useLocation } from "react-router-dom";
import { MainContext, useContext } from "../../../context/context";
export default function Navbar() {
  const { paramsBarcode, setParamsBarcode } = useContext(MainContext);
  const { barcode } = useParams();
  const location = useLocation();
  return (
    <>
      <Nav>
        <NavMenu>
          <NavLink
            to={`/product/${paramsBarcode ? paramsBarcode : barcode}`}
            aria-current={location.pathname.split("/")[3] == null ? "page" : ""}
          >
            Genel
          </NavLink>
          {barcode && (
            <NavLink
              to={`/product/${
                paramsBarcode ? paramsBarcode : barcode
              }/variation`}
            >
              Varyasyon
            </NavLink>
          )}
          {barcode && (
            <NavLink
              to={`/product/${
                paramsBarcode ? paramsBarcode : barcode
              }/marketplace`}
            >
              Pazaryeri
            </NavLink>
          )}
          {barcode && (
            <NavLink
              to={`/product/${paramsBarcode ? paramsBarcode : barcode}/storage`}
            >
              Depo
            </NavLink>
          )}
          {barcode && (
            <NavLink
              to={`/product/${paramsBarcode ? paramsBarcode : barcode}/images`}
            >
              Görsel
            </NavLink>
          )}
          {barcode && (
            <NavLink
              to={`/product/${
                paramsBarcode ? paramsBarcode : barcode
              }/description`}
            >
              Açıklama
            </NavLink>
          )}
          {barcode && (
            <NavLink
              to={`/product/${paramsBarcode ? paramsBarcode : barcode}/history`}
            >
              Alım Geçmişi
            </NavLink>
          )}
        </NavMenu>
      </Nav>
    </>
  );
}

Cevap yaz
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!