React Router V4 Реализация NavLink внутри ListItem с использованием пользовательского интерфейса материала

Question

Я новичок в React и создал простое приложение со страницей Login и Dashboard .Я успешно настроил свои общедоступные маршруты и частные маршруты с перенаправлением функциональности.Однако, когда я хочу реализовать material-ui / core Все еще довольно хорошо работает, но я не могу добиться UI , который я хочу.

Вот мойстарая реализация моего NavBar ниже:

const Navigation = () => {
    return (
        <div>
            <NavLink exact to="/" activeStyle={{ color: 'red' }}>Home</NavLink>
            <NavLink to="/about" activeStyle={{ color: 'red' }}>About</NavLink>
            <NavLink to="/contact" activeStyle={{ color: 'red' }}>Contact</NavLink>
        </div>
    )
}

export default Navigation

Так же просто, как без стилей или классов

Нотак как я хочу добавить несколько стилей , я использовал материал / ядро ​​пользовательского интерфейса и в итоге сделал новое ниже:

export const MainNavigation = (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ShoppingCartIcon />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <PeopleIcon />
      </ListItemIcon>
      <ListItemText primary="Customers" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <BarChartIcon />
      </ListItemIcon>
      <ListItemText primary="Reports" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <LayersIcon />
      </ListItemIcon>
      <ListItemText primary="Integrations" />
    </ListItem>
  </div>
);

Теперь первый ListItem выглядиткак это показано ниже:

Но когда я добавлю эту строку кода ниже:

<ListItemText primary={<NavLink exact to="/">Dashboard</NavLink>} />

Вот результат:

Но я не хочу, чтобы это произошло.

Я хочу оставить первый UI Iне хочу, чтобы он выглядел как якорный тег с под строкой ниже

Как я также могу обрабатывать активное состояние ListItem в материале / интерфейсе, интегрированном с реагирующим маршрутизатором NavLink или Link?Так что я могу придать какой-то стиль или использовать активный класс материала.

Цените, если кто-то может помочь.Заранее спасибо.

Answer 1

Вы можете сделать это, установив NavLink в качестве компонента элемента списка.Вот пример, который работал для меня!

<ListItem
  button
  key="Dashboard"
  component={NavLink} to="/dashboard"
>
    <ListItemIcon>
        <Dashboard />
    </ListItemIcon>
    <ListItemText primary="Dashboard" />
</ListItem>

Надеюсь, это поможет!

Answer 2

Вы можете присоединить класс к NavLink с помощью чего-то вроде:

<NavLink to="/" className="nav-link-item">
  Dashboard
</NavLink>

Затем присоедините стиль к этому классу как:

.nav-link-item {
  color: inherit;
  text-decoration: none;
}

.nav-link-item:hover,
.nav-link-item:active,
.nav-link-item:visited {
  color: red;
  text-decoration: none;
}

/* Styling for when the link is active */
.nav-link-item.active {
  color: green;
}