[React] #7.5 React Router

react-router-dom 버전
package.json 에서 기존 버전을 확인할 수 있다.

App.js

import { 
  BrowserRouter as Router,
  Switch,
  Route
 } from 'react-router-dom';
import Detail from './routes/Detail';
import Home from './routes/Home';

//Switch : 경로 하나에 하나의 렌더링을 하기위해 사용
//Route path='URL' -> URL에 따라서 컴포넌트 실행
function App() {
  return <Router>
      <Switch>
        <Route path='/hello'>
          <h1>Hello</h1>
        </Route>
        <Route path='/movie'>
          <Detail />
        </Route>
        <Route path='/'> 
          <Home />
        </Route>
      </Switch>
  </Router>; 
}
export default App;

 

Movie.js

import PropTypes from "prop-types";
import { Link } from "react-router-dom"; // Link = a태그와 비슷

function Movie({ coverImg, title, summary, genres }) {
    return (
    <div>
    <img src={coverImg} alt={title}/>
    <h2>
      <Link to="/movie">{title}</Link>
    </h2>
    <p>{summary}</p>
    <ul>
      {genres.map((g)=>
        <li key={g}>{g}</li>
      )}
    </ul>
  </div>
  );
}

Movie.propTypes = {
    coverImg: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;