# All files / src/chap08 MyLink.js

0% Statements 0/3
0% Branches 0/2
0% Functions 0/1
0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

     import { Link, useMatch, useResolvedPath } from 'react-router-dom';
    import './RouterNav.css';

    export function MyLink({ to, children, ...props }) {
      // 현재 경로와 링크가 일치하는지를 판단한다.
      const resolvedPath = useResolvedPath(to);
      const isMatch = !!useMatch({
        path: resolvedPath.pathname, end: true });
      // 일치 여부에 따라 링크 또는 평문 텍스트를 반환한다.
      return isMatch ?
        <span className="active">{children}</span> :
        <Link to={to} {...props}>{children}</Link>;
    }