react Html5-qrcodeを使用したバーコードスキャンでURL遷移

Question

Html5-qrcodeを使用し、バーコードスキャンを作成中です。
スキャンしたバーコードの商品ページに遷移させることを目標にしております。

スキャンしたバーコードを000-000の形に加工(正しく加工出来ているのは確認済み)し、商品ページに遷移させたいのですが上手くいきません。

ここが問題点？
router.push(${ROUTES.PRODUCT}/${result});

URLには[.....PRODUCT/[object 20object]と表示されてしまいます。
どなたかお知恵をお借りできないでしょうか。
宜しくお願い致します。

import { Html5QrcodeScanner } from "html5-qrcode";
import { Html5QrcodeError, Html5QrcodeResult } from "html5-qrcode/esm/core";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ROUTES } from '@utils/routes';
import { useRouter } from 'next/router';

export const BarcodeScanner = () => {
  const barcodeScannerContainer = useRef<HTMLDivElement | undefined>(undefined);
  const barcodeScanner = useRef<Html5QrcodeScanner | undefined>(undefined);
  
  const [result, setResult] = useState<string>();
  const router = useRouter();

  function navigateToProductPage() {
    router.push(`${ROUTES.PRODUCT}/${result}`);
  }

  console.log("barcodeScannerContainer", barcodeScannerContainer.current);

  const onScanSuccess = useCallback(
    (decodedText: string, result: Html5QrcodeResult) => {
      setResult(decodedText.substring( 0, 3 )+'-'+decodedText.substring( 3, 6 ) );
      router.push(`${ROUTES.PRODUCT}/${result}`);
    },
    []
  );
  const onScanerror = (errorMessage: string, error: Html5QrcodeError) => {};

  useEffect(() => {
    barcodeScanner.current = new Html5QrcodeScanner(
      "qr-reader",
      {
       supportedScanTypes:[], 
       fps:10,
       qrbox: {width: 250, height: 150}
      },
      true
    );
    barcodeScanner.current.render(onScanSuccess, onScanerror);
  }, [barcodeScannerContainer.current]);

  return (
    <div>
      <div>{result || "Nothing here"}</div>
      {/*<div id={"qr-reader"} ref={barcodeScannerContainer}>*/}
      <div id={"qr-reader"} >
        Barcode Scanner
      </div>
    </div>
  );
};

Answer 1

Html5QrcodeResultはオブジェクトですからそこからデコードした値が入ってるメンバを参照する必要があります。
https://github.com/mebjas/html5-qrcode/blob/master/src/core.ts#L173
ここ見る感じではresult.decodedTextに入っているのかな

Comments

[3939TJ55]

RiaFeed様
仰る通り「result.decodedText」に入っていました。ありがとうございます！
ちなみにURL遷移することはおかげさまで叶いましたが、遷移先で無限レンダリングしてしまいました。
useEffectのところでしょうか。