web-dev-qa-db-ja.com

ReactルーターV4マテリアルUIを使用してListItem内にNavLinkを実装する

私はReactを初めて使用し、LoginおよびDashboardページで簡単なアプリケーションを作成しました。 Public RoutesおよびPrivate RoutesをRedirect機能で正常に設定しました。ただし、実装したい場合 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

スタイリングまたはクラスなしでそれと同じくらい簡単です

しかし、私はいくつかのスタイルを追加したいので、material/ui coreを使用して、以下の新しいものを作成しました：

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は次のようになります。

enter image description here

しかし、以下のコード行を追加すると、

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

これが結果です：

enter image description here

しかし、私はこれが起こることを望んでいません。

最初の[〜＃〜] ui [〜＃〜]を保持したいアンカータグのようにしたくない下に下線

どうすれば、反応ルーターListItemまたはNavLinkと統合されたmaterial/uiのLinkのアクティブ状態をどのように処理できますか？そのため、スタイルを設定したり、アクティブなクラスの素材を使用したりできます。

誰かが助けてくれるなら感謝します。前もって感謝します。

reactjslistreact-routernavigation-drawermaterial-ui
6
KnowledgeSeeker

クラスを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;
}
0
Agney