React- Router Link Component

• Link Component
  • React에서 a태그 사용 시 원치 않은 결과를 가져옴
  • React App에서 페이지 이동 시 react-router-dom 에서 제공하는 Link 컴포넌트 사용
  • a 태그의 href 대신 Link 컴포넌트에서는 to props 사용

// App.js
import Links from './components/Links';

function App() {
  return (
    <BrowserRouter>
      <Links />
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

// Links.jsx
import { Link } from 'react-router-dom';

export default function Links() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/profile/1">Profile/1</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/about?name=msko">About?name=msko</Link>
      </li>
    </ul>
  );
}

---

• NavLink Component
  • import { NavLink } from 'react-router-dom';
  • activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정 가능
  • Route의 path 처럼 동작하기 때문에 exact 존재
  • query string으로 이동하는 Route의 경우 isActive 함수를 사용하여 처리
    (return 값이 true일 경우 activeStyle 적용됨)

// App.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';
import NotFound from './pages/NotFound';
import NavLinks from './components/NavLinks';

function App() {
  return (
    <BrowserRouter>
      <NavLinks />
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

// NavLinks.jsx
import { NavLink } from 'react-router-dom';

const activeStyle = { color: 'green' };

export default function NavLinks() {
  return (
    <ul>
      <li>
        <NavLink to="/" exact activeStyle={activeStyle}>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile" exact activeStyle={activeStyle}>
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile/1" activeStyle={activeStyle}>
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          exact
          activeStyle={activeStyle}
          isActive={(match, location) => {
            return match && !location.search;
          }}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=msko"
          activeStyle={activeStyle}
          isActive={(match, location) => {
            return match && location.search;
          }}
        >
          About?name=msko
        </NavLink>
      </li>
    </ul>
  );
}

---

• Link, NavLink Component의 차이점
  • active 유무