在 React Router 6 中怎么像vueRouter一样，可以在配置路由的时候，定义路由的元信息(附加信息)？答案是可以的。稍有些复杂。核心是通过为每个路由定义了一个 loader 函数,用于返回自定义的路由信息，然后通过useRouteLoaderData 钩子来获取自定义的路由信息。
在 React Router 6 中,你可以使用新引入的 useRouteLoaderData 钩子来获取自定义的路由信息。这个钩子允许你在路由级别加载和管理数据,包括自定义的路由信息。
以下是具体的步骤:
- 定义路由及自定义信息
首先,你需要在定义路由时添加自定义信息。这可以通过在每个路由对象上添加一个 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 函数,用于返回自定义的路由信息,例如页面标题。
- 创建路由器实例
接下来,你需要使用 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>
);
- 使用
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 中方便地获取和使用自定义的路由信息。这个新特性使得在路由级别管理数据变得更加简单和集中。
