useLocation

useLocation

1. useLocation

 - React Router 라이브러리의 일부

 - React 기반 웹 애플리케이션에서 현재 URL의 정보를 가져오는 데 사용되는 훅

 - 현재 경로 및 관련 정보에 쉽게 엑세스할 수 있도록 도와줌

 

2. 예시

 - RouterEx.js

    - location.pathname으로 현재 경로를 나타냄

import React from "react";
import { Routes, Route, Navigate, useLocation } from "react-router-dom";

function HomeMainPage() {
  return (
    <>
      <h1>Home, Main</h1>
    </>
  );
}

function HomeAboutPage() {
  return (
    <>
      <h1>HOME, ABOUT</h1>
    </>
  );
}

export default function RouterEx() {
  const location = useLocation();

  return (
    <>
      <header>현재 주소 : {location.pathname}</header>
      <Routes>
        <Route path="/home/main" element={<HomeMainPage />} />
        <Route path="/home/about" element={<HomeAboutPage />} />
        <Route path="*" element={<Navigate to="/home/main" />} />
      </Routes>
    </>
  );
}

 

 - App.js

import RouterEx from "./RouterEx";

function App() {
  return (
    <>
      <RouterEx />
    </>
  );
}

export default App;

 

 - 결과

    - 현재 주소인 /home/main이 나타남