Detail Container 1

import {

  BrowserRouter as Router,

  Route,

  Redirect,

  Switch

} from "react-router-dom";)

• Header.js

export default withRouter(({ location: { pathname } }) => (
  <Header>
    <List>
      <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>
));

• {Detail}는 Header.js 파일처럼 링크설정을 해줄 필요가없는데,
• 리액트라우터가(react-router-dom) 디폴트로 모든 정보를 Route들에게 주므로, 따로 꾸며줄필요가 없다고함 (props를 디폴트로 전달해줌)

 

 

 해야 할 작업

 

1. url경로가 /movie에 있는지, /show에 있는지 알아야함 

• DetailContainer.js

import React from "react";
import DetailPresenter from "./DetailPresenter";

export default class extends React.Component {
  state = {
    result: null,
    error: null,
    loading: true
  };

  async componentDidMount() {
    const {
      match: {
        params: { id }
      },
      history: { push }
    } = this.props;
    const parsedId = parseInt(id);
    if (isNaN(parsedId)) {
      return push("/");// id가 숫자가아닐시 홈으로 되돌아감, 라우터에 새 URL을 푸시
      // 리턴할때 함수는 종료됨
      // 리턴 없이 해주면, 사용자를 다른 페이지로 보내고 다음 실행문을 실행함
    }
  }

  render() {
  // console.log(this.props); => match.params 정보를 얻을수잇다.
    const { result, error, loading } = this.state;
    return <DetailPresenter result={result} error={error} loading={loading} />;
  }
}

2. url경로에 어떤 숫자가 있는지..? (/movie/1 <=  & /show/1 <= 여기에 어떤 숫자가 있는지 알아야함)

   =>  To be continue