React-Admin: <MenuItemLink>всегда отображается как `активный` - PullRequest
2 голосов
/ 16 марта 2020

Я использую react-admin. Я заменил / изменил <DashboardMenuItem> на <MenuItemLink> (обзор).

К сожалению, этот «обзор» появляется active, выбранный постоянно. Любая идея, как отключить его, когда выбран другой пункт меню?

Dashboard image

На приложенном изображении обратите внимание, что «Обзор» и «Отзывы Похоже, что выбран (active)

// Removed this line...
- <DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />

// And replaced it with this...
+ <MenuItemLink
    to={`/`} // by default `react-admin` renders Dashboard on this route
    primaryText={translate(`resources.overview.name`, {
      smart_count: 2
    })}
    leftIcon={<DashboardIcon />}
    onClick={onMenuClick}
    sidebarIsOpen={open}
    dense={dense}
/>

1 Ответ

0 голосов
/ 22 марта 2020

Это интересный вызов.

И вот лучший способ настроить ваши Dashboard и routes в соответствии с рекомендациями react-admin.

Вот несколько быстрых фактов:

  • По умолчанию домашняя страница (панель инструментов) приложения <Admin> представляет собой список первого дочернего элемента <Resource>.

  • Тем не менее, вы можете создать пользовательский компонент, который будет отображаться как домашняя страница / панель инструментов. (В вашем случае это то, что вы пытаетесь сделать).

// Method-1: 
// Create a custom dashboard and pass it to <Admin>
import MyCustomDashboard from './component'; // your custom dashboard

const App = () => (<Admin dashboard={MyCustomDashboard}>...</Admin>);

// Method-2: 
// Place your custom dashboard as the first resource
// Note that for this method, your dashboard should return a <List>
import { PostList } from './posts';

const App = () => (
  <Admin>
    <Resource name="posts" list={PostList} />
  </Admin>
);

Использование method-1 или method-2 правильно использует react-admin маршрутизация / навигация.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...