在React Router 6中使用useRouteLoaderData钩子获取自定义路由信息

在 React Router 6 中怎么像vueRouter一样，可以在配置路由的时候，定义路由的元信息(附加信息)？答案是可以的。稍有些复杂。核心是通过为每个路由定义了一个 loader 函数,用于返回自定义的路由信息，然后通过useRouteLoaderData 钩子来获取自定义的路由信息。

在 React Router 6 中,你可以使用新引入的 useRouteLoaderData 钩子来获取自定义的路由信息。这个钩子允许你在路由级别加载和管理数据,包括自定义的路由信息。

以下是具体的步骤:

1. 定义路由及自定义信息

首先,你需要在定义路由时添加自定义信息。这可以通过在每个路由对象上添加一个 loader 函数来实现。

// routes.js
import { Home, About, Product } from './components';

export const routes = [
  {
    path: '/',
    id:"home",
    element: <Home />,
    loader: () => ({ title: '首页' }),
  },
  {
    path: '/about',
    id:"about",
    element: <About />,
    loader: () => ({ title: '关于我们' }),
  },
  {
    path: '/product/:id',
    id:"product_id",
    element: <Product />,
    loader: ({ params }) => ({ title: `产品 ${params.id}` }),
  },
];

在这个示例中,我们为每个路由定义了一个 loader 函数,用于返回自定义的路由信息,例如页面标题。

2. 创建路由器实例

接下来,你需要使用 createBrowserRouter 或 createHashRouter 来创建路由器实例,并将其传递给 RouterProvider。

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { routes } from './routes';

const router = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

3. 使用 useRouteLoaderData 钩子

现在,你可以在组件中使用 useRouteLoaderData 钩子来获取自定义的路由信息。

// components/Home.jsx
import { useRouteLoaderData } from 'react-router-dom';

const Home = () => {
  const { title } = useRouteLoaderData('home'); //非常关键，路由配置要id,否则取不到

  return (
    <div>
      <h1>{title}</h1>
      {/* 其他内容 */}
    </div>
  );
};

export default Home;

在这个示例中,useRouteLoaderData 钩子返回了在路由定义中设置的自定义数据对象。我们使用对象解构来获取 title 属性,并在组件中进行渲染。

你还可以在父组件中使用 useRouteLoaderData 钩子,然后将数据作为 props 传递给子组件。这样可以在多个组件之间共享自定义路由信息。

总的来说,通过在路由定义中添加 loader 函数并使用 useRouteLoaderData 钩子,你可以在 React Router 6 中方便地获取和使用自定义的路由信息。这个新特性使得在路由级别管理数据变得更加简单和集中。