[React] 'useBlocker must be used within a data router' 오류 해결 / useBlocker 관련 오류 해결

useBlock 기능을 사용하려 했지만 알 수 없는 오류로 인해 애를 먹었다.

 

 

오류사진

 

 

오류의 원인은 버전 호환이 되지 않았기 때문이었다.

useBlock은 react-router 버전6 이전과 이후의 사용코드가 다르다. 따라서 자신이 사용하는 버전에 맞게 사용하도록 하자.

현재 나와있는 블로그에는 react-router v6.4 이전의 코드가 대부분이라 오류가 났다.

 

(본인이 사용한 react-router 버전은 7.0.1이다.)

버전이 6.4 이후로는 useBlocker가 Data Router 환경에서만 작동하도록 변경되었다.

따라서 라우팅을 설정할 때 기존방식인 BrowserRouter 대신 creacteBrowserRouter와 RouterProvider를 사용해야한다.

 

 

기존에 사용했던 방식

import {                                                         
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import Home from './pages/Home';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
            <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

 

 

- BrowserRouter를 사용하여 라우팅 설정

 

 

 

 

수정한 코드

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from './pages/Home';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

 

- BrowserRouter 대신 createBrowserRouter와 RouterProvider를 사용하여 라우팅 설정

 

 

공식 문서: https://reactrouter.com/6.28.0/hooks/use-blocker