React-admin如何实现点击按钮跳转至单独页面展示用户活动

Hey there, let's break down how to solve this problem step by step, tailored to your React-admin setup and requirements:

1. Create a Standalone User Activity List Component #

First, we'll build a dedicated component to display a user's activity. This component will fetch data using useQuery and accept a user_id via route parameters:

import { List, Datagrid, TextField, DateField } from 'react-admin';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import { Box, Typography } from '@mui/material';

// Custom fetch function for your RPC endpoint
const fetchUserActivity = async (userId) => {
  const baseUrl = 'YOUR_ACTUAL_BASE_URL'; // Replace with your API base URL
  const response = await fetch(`${baseUrl}/rpc/user_activity?id=${userId}`, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
  });
  
  if (!response.ok) throw new Error('Failed to load user activity');
  return response.json();
};

export const UserActivityList = () => {
  const { userId } = useParams();
  const { data: activities, isLoading, error } = useQuery({
    queryKey: ['userActivity', userId], // Unique key for query caching
    queryFn: () => fetchUserActivity(userId),
    enabled: !!userId, // Only run the query when userId is available
  });

  if (isLoading) return <Typography variant="body1">Loading activity data...</Typography>;
  if (error) return <Typography color="error">Error: {error.message}</Typography>;

  return (
    <Box sx={{ padding: 2 }}>
      <Typography variant="h5" gutterBottom>
        Activity Log for User ID: {userId}
      </Typography>
      {/* Use React-admin's List/Datagrid for consistent UI */}
      <List data={{ data: activities }} hasCreate={false} hasEdit={false}>
        <Datagrid rowClick={false}>
          {/* Customize these fields to match your user_activity schema */}
          <TextField source="activity_type" label="Activity Type" />
          <DateField source="timestamp" label="Date & Time" showTime />
          <TextField source="details" label="Details" />
        </Datagrid>
      </List>
    </Box>
  );
};

2. Add Custom Route for the Activity Page #

Register the new component as a custom route in your React-admin Admin setup to make it accessible:

import { Admin, Resource, Route } from 'react-admin';
import { UserActivityList } from './UserActivityList';
// Import your existing user components here
import { UsersList, UsersCreate, UsersEdit, UsersShow } from './users';

const App = () => (
  <Admin dataProvider={yourExistingDataProvider}>
    <Resource 
      name="user" 
      options={{ label: 'Users' }} 
      list={UsersList} 
      create={UsersCreate} 
      edit={UsersEdit} 
      show={UsersShow} 
    />
    {/* Add custom route for user activity */}
    <Route path="/user-activity/:userId" element={<UserActivityList />} />
  </Admin>
);

export default App;

3. Add "Activity" Buttons to User Edit/Show Pages #

Update your UsersEdit and UsersShow components to include a button that navigates to the activity page. We'll use React-admin's context hooks to get the current user ID:

For UsersEdit:

import { Edit, SimpleForm, TextInput, TopToolbar, Button } from 'react-admin';
import { useRecordContext, useNavigate } from 'react-admin';
import { Activity } from '@mui/icons-material';

// Custom toolbar with the Activity button
const UserEditToolbar = () => {
  const record = useRecordContext();
  const navigate = useNavigate();

  return (
    <TopToolbar>
      <Button
        label="Activity"
        startIcon={<Activity />}
        onClick={() => navigate(`/user-activity/${record.id}`)}
        variant="contained"
        sx={{ marginLeft: 'auto' }}
      />
    </TopToolbar>
  );
};

export const UsersEdit = () => (
  <Edit toolbar={<UserEditToolbar />}>
    <SimpleForm>
      {/* Your existing edit form fields */}
      <TextInput source="name" />
      <TextInput source="email" />
      {/* Add other user fields as needed */}
    </SimpleForm>
  </Edit>
);

For UsersShow:

import { Show, SimpleShowLayout, TextField, TopToolbar, Button } from 'react-admin';
import { useRecordContext, useNavigate } from 'react-admin';
import { Activity } from '@mui/icons-material';

const UserShowToolbar = () => {
  const record = useRecordContext();
  const navigate = useNavigate();

  return (
    <TopToolbar>
      <Button
        label="Activity"
        startIcon={<Activity />}
        onClick={() => navigate(`/user-activity/${record.id}`)}
        variant="contained"
        sx={{ marginLeft: 'auto' }}
      />
    </TopToolbar>
  );
};

export const UsersShow = () => (
  <Show toolbar={<UserShowToolbar />}>
    <SimpleShowLayout>
      {/* Your existing show page fields */}
      <TextField source="name" />
      <TextField source="email" />
      {/* Add other user fields as needed */}
    </SimpleShowLayout>
  </Show>
);

4. Key Notes on Your Questions #

• Passing user_id to useQuery: We use useParams to grab the user ID from the route URL, then pass it directly to our fetch function in the useQuery hook. The enabled option ensures we don't run the query until the ID is available.
• Optimal Page/Component Setup: Using a custom route + standalone UserActivityList component is the best fit for your "separate page" requirement. We leverage React-admin's built-in List and Datagrid to maintain UI consistency with the rest of your app, while using useQuery for flexible data fetching tailored to your RPC endpoint.

内容的提问来源于stack exchange，提问作者Andrew Dushkin