82963


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

[code]

    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 <></>;
    });
    
[/code]

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

[code]

    react-router-dom@5.3.0
    react@17.0.2
    
[/code]


CC BY-SA 4.0
2021-10-05T10:35:27.837
82888
2021-10-08T10:23:15.583
19297
question
reactjs typescript react-router-dom
react-router-domのuseLocation()でprotocolとhostを取得する方法


`Collaborator`によると、[React Routerはそうした機能をサポートしていない](https://github.com/remix-
run/react-router/issues/7638#issuecomment-701034488)ようです。

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

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

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


CC BY-SA 4.0
2021-10-08T10:23:15.583
82963
2021-10-08T10:23:15.583
48233
82888
answer