I’m using okta for secure my website that using react route v5.
Now, I want to update to react route v6

First, I tried this and got the error: “useBlocker must be used within a data router”

  ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

function App() {
      const navigate = useNavigate();
      const restoreOriginalUri = (_oktaAuth: any, originalUri: string) => {
        navigate(toRelativeUrl(originalUri || "/", window.location.origin));
      };
    
      return (
        <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
          <AppRoutes />
        </Security>
      );
    }
    
    const AppRoutes = () => {
      return (
        <Routes>          
          <Route path="login/callback" element={<LoginCallback />} />
          <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Route>
        </Routes>
      );
    };
    
    
    const About = () => {
      let blocker = useBlocker(({ currentLocation, nextLocation }) => true);
    
      return (
        <div>
          About Page
          {blocker.state === "blocked" ? (
            <div>
              <p>Are you sure you want to leave?</p>
              <button onClick={() => blocker.proceed()}>Proceed</button>
              <button onClick={() => blocker.reset()}>Cancel</button>
            </div>
          ) : null}
        </div>
      );
}

Then, I updated the code with the following changes:

ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
);

 const AppRoutes = () => {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route>
        <Route path="login/callback" element={<LoginCallback />} />
        <Route path="/" element={<Home />}>
          <Route path="/about" element={<About />} />
        </Route>
      </Route>
    )
  );

  return <RouterProvider router={router} />;
};

and got other issue: “useNavigate() may be used only in the context of a component”

I need to remove BrowserRouter because I need a data router for useBlocker

I’m searching a lot but can’t find anything to resolve my problem.
Can anyone help me? Thank you.