在 React Admin 中,您可以使用 useQueryWithStore
钩子来获取 URL 查询参数并将其与您的请求一起发送
CustomApp.js
。CustomApp.js
中,导入所需的依赖项并创建一个新的 CustomApp
组件:import React from 'react';
import { createApp, useQueryWithStore } from 'react-admin';
const CustomApp = () => {
const { store, dispatch } = useQueryWithStore();
React.useEffect(() => {
const params = new URLSearchParams(window.location.search);
const query = params.get('query') || '';
if (query) {
// 将查询参数添加到 store 中
dispatch({ type: 'RA/CRUD_GET_LIST', payload: { query } });
}
}, [dispatch]);
return <Admin store={store} />;
};
export default createApp(CustomApp);
在这个例子中,我们从 URL 查询参数中获取名为 query
的参数,并将其作为查询条件发送到后端。
index.js
文件,以便在应用程序启动时使用我们的自定义 CustomApp
组件:import * as React from 'react';
import ReactDOM from 'react-dom';
import CustomApp from './CustomApp';
ReactDOM.render(
<React.StrictMode>
<CustomApp />
</React.StrictMode>,
document.getElementById('root')
);
现在,当您访问带有查询参数的 URL(例如:http://localhost:3000/?query=test
)时,React Admin 应用程序将在请求中包含查询参数。
领取专属 10元无门槛券
手把手带您无忧上云