剧场模式
首页前端GraphQLGraphQL + React Apollo + React Hook 大型项目实战

GraphQL + React Apollo + React Hook 大型项目实战 #4 用 semantic-ui-react 写好导航 (三更)

海外散仙厉飞雨 · 化神发布于新课程
0

https://semantic-ui.com/

https://react.semantic-ui.com/usage

https://marketplace.visualstudio.com/items?itemName=huanent.fix-ctrl-space

import React, { useState } from "react";
import { Menu } from "semantic-ui-react";
import { Link } from "react-router-dom";

function MenuBar() {
  const pathname = window.location.pathname;
  const path = pathname === "/" ? "home" : pathname.substr(1);
  const [activeItem, setActiveItem] = useState(path);

  const handleItemClick = (e, { name }) => setActiveItem(name);

  return (
    <div>
      <Menu size="massive" color="teal" pointing secondary>
        <Menu.Item
          name="home"
          active={activeItem === "home"}
          onClick={handleItemClick}
          as={Link}
          to="/"
        />
        <Menu.Menu position="right">
          <Menu.Item
            name="login"
            active={activeItem === "login"}
            onClick={handleItemClick}
            as={Link}
            to="/login"
          />
          <Menu.Item
            name="register"
            active={activeItem === "register"}
            onClick={handleItemClick}
            as={Link}
            to="/register"
          />
        </Menu.Menu>
      </Menu>
    </div>
  );
}

export default MenuBar;
0 条回复
暂无回复~~
小程序(beta)
随机课程
GraphQL + React Apollo + React Hook 大型项目实战

GraphQL + React Apollo + React Hook 大型项目实战

21 个视频2 小时 51 分钟高级

Pro¥ 258.00¥ 206.40

前端GraphQL正在更新新课程

课程目录

1FreeGraphQL + React Apollo + React Hook 大型项目实战 #1 介绍

2FreeGraphQL + React Apollo + React Hook 大型项目实战 #2 搭建 Apollo 客户端

3FreeGraphQL + React Apollo + React Hook 大型项目实战 #3 写好路由

FreeGraphQL + React Apollo + React Hook 大型项目实战 #4 用 semantic-ui-react 写好导航 (三更)

5ProGraphQL + React Apollo + React Hook 大型项目实战 #5 使用 useQuery 查询数据

6ProGraphQL + React Apollo + React Hook 大型项目实战 #6 使用 semantic Card 显示 Post

7ProGraphQL + React Apollo + React Hook 大型项目实战 #7 完成显示 Post 列表

8ProGraphQL + React Apollo + React Hook 大型项目实战 #8 注册页面

9ProGraphQL + React Apollo + React Hook 大型项目实战 #9 完成注册

10ProGraphQL + React Apollo + React Hook 大型项目实战 #10 重构代码 - 自定义 hook

11ProGraphQL + React Apollo + React Hook 大型项目实战 #11 登录功能

12ProGraphQL + React Apollo + React Hook 大型项目实战 #12 使用 context 和 useReducer 处理登录登出功能

13ProGraphQL + React Apollo + React Hook 大型项目实战 #13 使用 useContext 处理登录登出功能

14ProGraphQL + React Apollo + React Hook 大型项目实战 #14 根据登录状态修改菜单

15ProGraphQL + React Apollo + React Hook 大型项目实战 #15 使用 localStorage 持久化登录状态

16ProGraphQL + React Apollo + React Hook 大型项目实战 #16 自制 authRoute 保护路由

17ProGraphQL + React Apollo + React Hook 大型项目实战 #17 创建 Post

18ProGraphQL + React Apollo + React Hook 大型项目实战 #18 使用 apollo-link-context 给每次请求加上头部认证信息

19ProGraphQL + React Apollo + React Hook 大型项目实战 #19 mutation 更新 apollo 的 cache

20ProGraphQL + React Apollo + React Hook 大型项目实战 #20 apollo 的 cache

21ProGraphQL + React Apollo + React Hook 大型项目实战 #21 删除 Post 按钮

学员
ms042087 · 元婴boguan · 真仙HytonightYX · 元婴小徐 · 元婴JingLiangWen · 大罗过冻 · 元婴Emperor · 元婴Guhotifoli · 元婴志涛 · 真仙
最新动态
ms042087 · 元婴学习到了11:51
boguan · 真仙学习到了13:36
HytonightYX · 元婴学习到了6:23
小徐 · 元婴学习到了12:07
JingLiangWen · 大罗学习到了0:57

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:96

Top