useLoaderData 必须在数据路由器内使用

Question

我正在使用react-roter-dom v 6.4.2。我想在我的主页中使用 useLoaderData，如下所示：

import React from 'react';
import { useLoaderData } from 'react-router-dom';

const Home = () => {
  try {
    const user = useLoaderData();
    console.log(user);
  } catch (error) {
    console.log(error);
  }
  return (
    <div>
      <h2>This is Home</h2>
    </div>
  );
}

export default Home;

我在 Route 组件中使用 loader，如下所示：

import logo from './logo.svg';
import './App.css';
import { Route, Routes } from 'react-router-dom';
import About from './components/About';
import Products from './components/Products';
import Header from './components/Header';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Header></Header>
      <Routes>
        <Route
          path='/'
          loader={async ({ request }) => {
            // loaders can be async functions
            const res = await fetch("https://jsonplaceholder.typicode.com/users", {
              signal: request.signal,
            });
            const user = await res.json();
            return user;
          }}
          element={<Home/>}
        ></Route>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/products' element={<Products></Products>}></Route>
      </Routes>
    </div>
  );
}

export default App;

但这显示错误： useLoaderData 必须在数据路由器内使用。 我该如何解决这个问题？

Answer 1

你必须使用RouterProvider组件。它是一个自关闭组件，并带有一个router由函数创建的 prop createBrowserRouter。

在createBrowserRouter函数中，您可以传递一组对象（每个对象代表一条路线）。或者，您可以传递createRoutesFromElements将您的路由作为 JSX 并将其转换为路由对象的函数（在这种情况下，您的父组件应该是 aRoute而不是Routes，并且它必须返回 anOutlet才能呈现其子路由元素）

这是一个展示您的示例的沙箱。