[Kossie Coder] react router 설치

npm install react-router-dom@6

위 버전으로 다운 받을 시 react-router 바뀐 문법으로 사용해야 함

Routes 사용 ⇒ Routes 안에는 <Route> 만 있어야 한다. 내용을 보여줘야 한다면 <Route> 안에 element={} 에서 🌟props🌟로 컴포넌트 보내기

// App.js

import React, { useState } from 'react';
import './index.css';
import Movie from './components/Movie';
import MovieForm from './components/MovieForm';
import Navbar from './components/Navbar';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  🌟Routes, // 라우터 최신버전으로 다운 시 바뀐 부분🌟
} from 'react-router-dom';
🌟import MovieContainer from './components/MovieCotainer';🌟

function App() {
  const [movies, setMovies] = useState([]);

  const removeMovie = (id) => {
    setMovies(
      movies.filter((movie) => {
        return movie.id !== id;
      })
    );
  };

  const addMovie = (movie) => {
    setMovies([...movies, movie]);
  };

  return (
    🌟<Router>🌟
      <div className="App">
        <Navbar />
        🌟<Routes>
        <Route
            path="/movies"
            element={
              <MovieContainer
                movies={movies}
                removeMovie={removeMovie}
                addMovie={addMovie}
              />
            }
          />🌟
        🌟</Routes>🌟
      </div>
    </Router>
  );
}
export default App;

// MovieContainer.js

import Movie from './Movie';
import MovieForm from './MovieForm';

const MovieContainer = ({ movies, removeMovie, addMovie }) => {
  return (
    <>
      <h1>hda</h1>
      <MovieForm addMovie={addMovie} />
      {movies.length > 0 ? (
        movies.map((movie, idx) => {
          return <Movie key={idx} movie={movie} removeMovie={removeMovie} />;
        })
      ) : (
        <span>추가된 영화가 없습니다.</span>
      )}
    </>
  );
};

export default MovieContainer;

 

라우터 최신버전으로 설치 시 아래 코드 형태로 작성해야 함

<Router>
	<Routes>
		<Route />
		<Route />
	</Routes>
<Router>

 

강의를 따라가기 위해 다운그레이드한 버전

// package.json

"react-router-dom": "^5.3.0"

package.json에서 위와 같이 수정 후 터미널에서 npm install을 한다.

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 따라하다 문제가 생겼고,

그 문제를 해결한 과정을 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */