제로초님 앤트디자인 메뉴

<Menu onClick={this.handleClick} style={{ width: 256 }} defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" > <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One"> <Menu.ItemGroup key="g1" title="Item 1"> <Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item> </Menu.ItemGroup> <Menu.ItemGroup key="g2" title="Item 2"> <Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item> </Menu.ItemGroup> </SubMenu> <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two"> <Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item> <SubMenu key="sub3" title="Submenu"> <Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item> </SubMenu> </SubMenu> <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three"> <Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="12">Option 12</Menu.Item> </SubMenu> </Menu>

앤트디자인 메뉴 목록중에요

사이드 메뉴 디자인인데

저걸 가져다가 쓰면 정상작동합니다.

근데 문제는

<Menu.Item key="9"><Link href=""><a>Option 9</a></Link></Menu.Item>

이런식으로 메뉴 아이템안에다가 링크를 넣어서 링크이동을 시켰을경우

링크를 넘어가면서 초기화가 되어버립니다.

그러니까.. 클릭을 하면 해당페이지로 넘어가면서 해당 클릭한 메뉴가 클릭이 되어 있어야 하는데

링크를 넘어가면서 초기화가 되어버리면서 디폴트값인 첫번째 값에 클릭값이 옮겨갑니다.

디폴트값을 없애도 첫번째값으로만 옮겨가지 않을뿐 전체 초기화가 되어버립니다.

이거 왜이러는 건가요 ㅠ? 해결방법좀 알려주세요

const router = useRouter();

return (
  <div>
    <Menu mode="horizontal" selectedKeys={[router.pathname]}>
      <Menu.Item key="/">
        <Link href="/"><a>노드버드</a></Link>
      </Menu.Item>
      <Menu.Item key="/profile">
        <Link href="/profile"><a>프로필</a></Link>
      </Menu.Item>

저는 이렇게 했습니다. useRouter에서 router.pathname 받아서 selectedKeys에 넣었구요. Menu.Item의 key는 편의를 위해 href랑 일치시켜놨습니다.