RealJS 5 5 5日目

#6.0 Getting Ready for the Router

#6.1 Building the Router

import React from "react";
import {HashRouter, Route} from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import "./App.css"

function App(){
  return (
    <HashRouter>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

#6.2 Building the Navigation

import React from "react";
import {Link} from "react-router-dom";
import "./Navigation.css";

function Navigation(){
    return (
        <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}

export default Navigation;

function App(){
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

#6.3 Sharing Props Between Routes

import React from "react";
import PropTypes from "prop-types";
import {Link} from "react-router-dom";
import "./Movies.css";

function Movie({id, year, title, summary, poster, genres}){
    return (
        <Link to={{
            pathname: "/movie_detail",
            state: {
                year,
                title,
                summary,
                poster,
                genres
            }
        }}
        >
            <div className="movie">
                <img src={poster} alt={title} title={title}/>
                <div className="movie__data">
                    <h3 className="movie__title">{title}</h3>
                    <h5 className="movie__year">{year}</h5>
                    <ul className="movie__genres">
                        {genres.map((genre, index) => ( //map함수에 index 자동 생성
                        <li key={index} className="genres__genre">{genre}</li> //key값 추가해줘야함 
                            ))}
                    </ul>
                    <p className="movies__summary">{summary.slice(0,180)}...</p>
                </div>
            </div>
        </Link>
    );
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;

#6.4 Redirecting

import React from "react";

class Detail extends React.Component{
    componentDidMount(){
        const {location, history} = this.props;
        if(location.state === undefined){
            history.push("/");
        }
    }
    render(){
        const {location} = this.props;
        if(location.state){
            return <h1>{location.state.title}</h1>
        }else{
            return null;
        }
        
    }
}

export default Detail;