0

react-router-domのuseLocation()でprotocolとhostを取得する方法はありますか?
useLocation()ではなく、window.location.protocol、window.location.hostとするしかないのでしょうか?

import { memo, VFC, useEffect } from "react";
import { useLocation } from "react-router-dom";

export const Test: VFC = memo(() => {
  const location = useLocation();

  useEffect(() => {
    console.log(location.pathname); // OK
    console.log(location.protocol); // NG
    console.log(location.host); // NG
    console.log(window.location.protocol); // OK
    console.log(window.location.host); // OK
  }, [location]);

  return <></>;
});

各ライブラリのバージョンは以下を使用しています。

[email protected]
[email protected]

1 件の回答 1

2

Collaboratorによると、React Routerはそうした機能をサポートしていないようです。

useLocationという名前がややミスリードなのですが、
ここでいうLocationLocationオブジェクト(つまりドキュメントの位置を表すURL)ではなく、
React RouterがSPAで擬似的なルーティングを行うにあたっての内部的なロケーション情報、という意味合いのようです。

useLocation()ではなく、window.location.protocol、window.location.hostとするしかないのでしょうか?

はい。その方法になると思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。