React Router V4 Implémenter NavLink dans un ListItem en utilisant Material UI

Question

Je suis nouveau sur React et j'ai créé une application simple avec Login et Tableau de bord . J'ai correctement configuré mes itinéraires publics et itinéraires privés avec les fonctionnalités de redirection . Cependant, quand je veux implémenter material-ui/core Les choses sont fonctionne toujours assez bien mais je ne peux pas atteindre [~ # ~] ui [~ # ~] que je veux.

Voici mon ancienne implémentation de mon NavBar ci-dessous:

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

Aussi simple que sans classes de style ou

Mais comme je veux ajouter des styles j'ai utilisé matériel/ui core et a fini par faire le nouveau ci-dessous:

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

Maintenant, le premier ListItem ressemble à ceci ci-dessous:

Mais quand j'ajoute cette ligne de code ci-dessous:

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

Voici le résultat:

Mais je ne veux pas que cela se produise.

Je veux garder le premier [~ # ~] ui [~ # ~] Je ne veux pas que ça ressemble à un balise d'ancrage avec un sous la ligne ci-dessous

Comment puis-je également gérer l'état actif du ListItem dans le matériel/ui intégré avec le routeur de réaction NavLink ou Link? Pour que je puisse mettre du style ou utiliser la classe active de matériel.

Appréciez si quelqu'un peut vous aider. Merci d'avance.

Answer 1

Vous pouvez attacher une classe à NavLink avec quelque chose comme:

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

Ensuite, attachez le style à cette classe comme suit:

.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;
}