19.12.04 withRouter

헤더가 어떤 라우터에 있는지 알게 하자

파일 구조
src/Components/Header.js

Header.js

import React from "react";
import { Link, withRouter  } from "react-router-dom";
import styled from "styled-components";


const Header = styled.header`
...
`;
const List = styled.ul`
...
`;
const Item = styled.li`
  margin-right:10px;
  border-bottom: 3px solid

  // 2. props.current 값이 true면 #3498db, 아니면 투명
  ${props => (props.current ? "#3498db" : "transparent")};
`;
const SLink = styled(Link)`
...
`;

// 1. 헤더에 proprs 주기 (withRouter로 감싸줘야 props 사용 가능)
export default withRouter(({ location: { pathname } }) => (
    <Header>
    	console.log(proprs)
      <List>
      	// 3. 각 라우터에 current 값 설정
        <Item current={pathname === "/"}>
          <SLink to="/">Movies</SLink>
        </Item>
        <Item current={pathname === "/tv"}>
          <SLink to="/tv">TV</SLink>
        </Item>
        <Item current={pathname === "/search"}>
          <SLink to="/search">Search</SLink>
        </Item>
      </List>
    </Header>
  ));