如何配置Admin-on-rest的SimpleList：移动端点击显Show表单及解决白屏

Hey there! Let's tackle your two issues one by one — I've run into similar scenarios before, so here's what works:

1. Make open the Show form on mobile when clicking list items #

By default, directs clicks to the Edit view on all devices. To override this for mobile only, you can combine the rowClick prop with a media query to detect device size. Here's a clean implementation:

First, use Admin-on-rest's built-in media query utilities to check if we're on a mobile device, then set the appropriate click behavior:

import { SimpleList, useMediaQuery } from 'admin-on-rest';

const MobileFriendlySimpleList = (props) => {
  // Detect mobile screens (adjust the breakpoint to match your design)
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <SimpleList
      {...props}
      // On mobile, open Show view; on desktop, keep default Edit behavior
      rowClick={isMobile ? 'show' : 'edit'}
      // Optional: Customize your list item content
      renderItem={(record) => (
        <div>
          <strong>{record.name}</strong>
          <p>{record.description}</p>
        </div>
      )}
    />
  );
};

If you need more control (like adding pre-navigation logic), pass a function to rowClick instead:

rowClick={(id) => {
  if (isMobile) {
    props.show(id); // Trigger Show view
  } else {
    props.edit(id); // Trigger Edit view
  }
}}

2. Fix white screen when clicking items with no Edit view #

The white screen happens because Admin-on-rest tries to navigate to an Edit route that doesn't exist for your resource. The fix is to force clicks to open the Show view whenever an Edit view isn't available.

Option 1: Static override (for known resources) #

If you know a specific resource has no Edit view, just set rowClick="show" directly:

<SimpleList
  {...props}
  rowClick="show"
  renderItem={(record) => <div>{record.title}</div>}
/>

Option 2: Dynamic check (for reusable components) #

For a reusable component that auto-detects edit access, add logic to check if the resource allows editing. Here's an example using permissions:

import { SimpleList } from 'admin-on-rest';

const SafeSimpleList = (props) => {
  // Check if the user has edit permissions for this resource
  const hasEditAccess = props.permissions 
    ? props.permissions.includes(`edit${props.resource}`) 
    : false;

  return (
    <SimpleList
      {...props}
      rowClick={hasEditAccess ? 'edit' : 'show'}
      renderItem={(record) => <div>{record.name}</div>}
    />
  );
};

This ensures clicks always land on an existing view, eliminating the white screen entirely.

内容的提问来源于stack exchange，提问作者Alexander Knyazev