React-Admin: <MenuItemLink> always appears as `active`

user_9798168 0
Viewed 1531

Am using react-admin.
I replaced/changed the <DashboardMenuItem> to <MenuItemLink> (overview).

Unfortunately, this "overview" appears active selected all the time.
Any idea how to deactivate it when another menu item is selected?

Dashboard image

In the attached image, notice that "Overview" and "Reviews" appear to be selected (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}
/>
react-admin material-ui reactjs
2 Answers

According to react-router documentation, you can do that by add props exact to the link component:

<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}
    exact
/>
user_117342820

This is an interesting challenge.

And here's the best way to customize your Dashboard and routes as advised by react-admin.

Here are some quick facts:

  • By default, the homepage (dashboard) of an <Admin> app is the list of the first child <Resource>.

  • Nevertheless, you can create a custom component to be rendered as the homepage/Dashboard. (In your case, this is what your are trying to do).

// 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>
);

Using method-1 or method-2 makes proper use of the react-admin routing/navigation.

user_108494380
Related