[React] React-Router-Dom V6에서 useLocation(); 불러오기 오류

 

React Router Dom 사용 중 현재 열린 링크의 위치를 알아내기 위해 useLocation을 사용해야 하는데,

React js: Error: useLocation() may be used only in the context of a <Router> component

위의 오류가 콘솔에 뜨고 화면 전체가 날아가서 안 보이는 현상이 발생.

 

기존 상태

 

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

App.js

import React, {useState} from "react";
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

import MainPage from "./pages/MainPage";
import NewsPage from "./pages/NewsPage";

import Header from "./component/Header";
import Footer from "./component/Footer";

import "./css/main.css";

const App = () => {

  // Now url
  const location = useLocation();

  // Header menu
  const [title, setTitle] = useState([
    {id:1, title: "HOME", link:"/main"},
    {id:2, title: "NEWS", link:"/news"},
  ]);

  return (
    <BrowserRouter>
        {/* header */}
        <Header
          title={title}
          location={location.pathname}
        />
        {/* //header */}
        <Routes>
          <Route path="/main" element={<MainPage />} />
          <Route path="/news" element={<NewsPage />} />
            
        </Routes>
        {/* footer */}
        <Footer />
        {/* //footer */}
    </BrowserRouter>
  );
}

export default App;

 

Index.js 에선 App Component만 불러오고

App.js에서 BrowserRouter부터 내용 전체를 불러오도록 구성했었는데,

 

Newbetuts

 

상단의 사이트 내용 중 Solution 2를 참고

 

 Index.js에서 App Component를 BrowserRouter로 감싸니 해결됨.

 

 

해결된 상태

 

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

App.js

import React, {useState} from "react";
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

import MainPage from "./pages/MainPage";
import NewsPage from "./pages/NewsPage";

import Header from "./component/Header";
import Footer from "./component/Footer";

import "./css/main.css";

const App = () => {

  // Now url
  const location = useLocation();

  // Header menu
  const [title, setTitle] = useState([
    {id:1, title: "HOME", link:"/main"},
    {id:2, title: "NEWS", link:"/news"},
  ]);

  return (
    <>
        {/* header */}
        <Header
          title={title}
          location={location.pathname}
        />
        {/* //header */}
        <Routes>
          <Route path="/main" element={<MainPage />} />
          <Route path="/news" element={<NewsPage />} />
            
        </Routes>
        {/* footer */}
        <Footer />
        {/* //footer */}
    </>
  );
}

export default App;