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 */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] NavLink 사용하기 (0) | 2022.01.15 |
---|---|
[Kossie Coder] react router Switch, exact 속성 (0) | 2022.01.14 |
[Kossie Coder] InputField 컴포넌트로 빼내기 (0) | 2022.01.14 |
[Kossie Coder] 폼 입력 안 했을 시 에러문구 표시 (0) | 2022.01.14 |
[Kossie Coder] 영화 삭제하기 - filter를 이용해서 삭제한 id 가 아닌 영화들 return하기 (0) | 2022.01.14 |