パス関連など、各種情報 取得

概要

import	オブジェクト	用途
react-router-dom	useLocation().pathname	URL のパス
@docusaurus/plugin-content-docs/client	useDoc().metadata.source	元の(=ビルド前の) md ファイルのパス
react-responsive	useMediaQuery({ maxWidth: 767})	スマホ判定

一覧にするためにつなげて書いたが、実際は分割代入などを組み合わせてスッキリさせる。

以下はコード例。

URL のパス

tsx

import { useLocation } from 'react-router-dom';

export default function Xxx(): ReactNode { // ReactNode でも JSX.Element でもOK
  const location = useLocation();
  console.log(location.pathname); // → /memo/python-memo/constants-and-package

実ファイルのパス

tsx

import { useDoc } from '@docusaurus/plugin-content-docs/client';

export default function Xxx(): ReactNode {
  const { metadata } = useDoc();
  console.log(metadata.source); // → @site/docs/04.memo/python-memo/03.constants-and-package.md

スマホ判定

tsx

import { useMediaQuery } from 'react-responsive';

export default function Xxx(): ReactNode {
  const isMobile = useMediaQuery({ maxWidth: 767 }); // スマホ判定

要インストール

bash

npm install react-responsive

参考(共通)

tsx

export default function Xxx(): ReactNode { // ReactNode でも JSX.Element でもOK