# All files / src/chap08 RouterNav.js

0% Statements 0/1
100% Branches 0/0
0% Functions 0/1
0% Lines 0/1

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
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63

     import { NavLink, Outlet } from 'react-router-dom';
    import './RouterNav.css';

    export default function RouterNav() {
      return (
        <>
          <ul>
            <li><NavLink to="/">홈</NavLink></li>
            <li><NavLink to="/article">기사</NavLink></li>
            <li><NavLink to="/about">회사 소개</NavLink></li>
          </ul>
          <hr />
          <Outlet />
        </>
      );
    }

    // Code 8-2-8
    // import { NavLink, Outlet } from 'react-router-dom';
    // import './RouterNav.css';

    // const isCurrent = ({ isActive, isPending }) => isActive ? 'active' : '';

    // export default function RouterNav() {
    //   return (
    //     <>
    //       <ul>
    //         <li><NavLink className={isCurrent} to="/">홈</NavLink></li>
    //         <li><NavLink className={isCurrent} to="/article">기사</NavLink></li>
    //         <li><NavLink className={isCurrent} to="/about">회사 소개</NavLink></li>
    //       </ul>
    //       <hr />
    //       <Outlet />
    //     </>
    //   );
    // }

    // Code 8-2-9
    // import { NavLink, Outlet } from 'react-router-dom';
    // import './RouterNav.css';

    // const isCurrent = ({ isActive }) => isActive ? {
    //   color: 'Red',
    //   fontWeight: 'bold'
    // } : {};

    // export default function RouterNav() {
    //   return (
    //     <>
    //       <ul>
    //         <li><NavLink style={isCurrent} to="/">홈</NavLink></li>
    //         <li><NavLink style={isCurrent} to="/article">기사</NavLink></li>
    //         <li><NavLink style={isCurrent} to="/about">회사 소개</NavLink></li>
    //       </ul>
    //       <hr />
    //       <Outlet />
    //     </>
    //   );
    // }