为什么react js中没有调用loader函数？

Question

我正在使用react router dom loader功能 https://reactrouter.com/en/main/route/loader

<BrowserRouter>
      <Routes>
        <Route
          path={'/ap'}
          loader={() => {
            console.log('0000');
            return 'ss';
          }}
          element={<App />}
        ></Route>
      </Routes>
    </BrowserRouter>

当我检查控制台时，它没有被调用，或者换句话说，消息没有被打印。 这是我的代码 https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev

function App() {
  const [count, setCount] = useState(0);
  const data = useLoaderData();
  console.log('----s', data);
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
    </>
  );
}

我正在尝试在路由之前获取一些数据..不知道我在哪里。我做错了

Answer 1

路由加载器仅在使用数据路由器时起作用，例如使用

createBrowserRouter

、

createMemoryRouter

等创建的路由器。如果您想使用数据 API，那么您需要转换为数据路由器。

示例：

import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
} from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/ap"
      loader={() => {
        console.log('0000');
        return 'ss';
      }}
      element={<App />}
    />
  )
);

...

<RouterProvider router={router} />

欲了解更多信息，请参阅：

• 选择路由器
• 路线

  loader