React Router's useLoaderData Console Error-CodePudding

When I try using the useLoaderData hook from react-router-dom, it has been giving me the same error

Uncaught Error: useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.

no matter what change I make in the Home Component, so that made me guess the issue is not from there.

This is what my Main.jsx looks like:

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

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

My App.jsx:

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home, { homeLoader } from './pages/Home'
import About from './pages/About'
import GlobalLayout from './GlobalLayout'

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/' element={<GlobalLayout />}>  
          <Route index element={<Home />} loader={homeLoader} />
          <Route path='/about' element={<About />} />
        </Route>
      </Routes>
    </>
  )
}

export default App

I think everything in my Home.jsx is fine

I have tried checking out the documentation attached to the error and its not helping.

CodePudding user response：

In order to use the RRDv6.4 Data APIs a data router must be used. See Picking a Router.

Use the createBrowserRouter utility to create a Data router. The created router object is passed to the RouterProvider component. Any routes and components that you want or need to use the Data APIs necessarily need to be declared here at build time as part of the data router creation.

App.jsx

import React from 'react';
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
  Routes
} from 'react-router-dom';
import Home, { homeLoader } from './pages/Home';
import About from './pages/About';
import GlobalLayout from './GlobalLayout';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<GlobalLayout />}>  
      <Route path="/" element={<Home />} loader={homeLoader} />
      <Route path="/about" element={<About />} />
    </Route>
  )
);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

Main.jsx

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

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