반응 - 목록 항목에 포커스를 주는 방법은 무엇입니까?

이 항목은 웹 사이트의 메뉴와 관련이 있습니다.

예를 들어,
웹 사이트를 방문하여 메뉴 항목을 클릭하면 다른 페이지를 보여주는 다른 경로로 이동합니다.
그러나 메뉴 항목에는 배경색(포커스)이 있습니다.

해당 기능을 구현하는 방법을 보여 드리겠습니다.

import {useLocation} from 'react-router-dom'

react-router-dom 라이브러리를 사용하여 이 작업을 수행합니다. useLocation 라는 후크가 있습니다.

const location = useLocation();

const styles = {
  active: {
    background: '#f4f4f4'
  }
}

return (
  <List>
    {menuItems.map(item => (
      <ListItem sx={location.pathname === item.path ? styles.active : null}>
        <ListItemIcon>{item.icon}</ListItemIcon>
        <ListItemText primary={item.text}/>
      </ListItem>
    ))}
  </List>
)

중요한 부분

<ListItem sx={location.pathname === item.path ? styles.active : null}>