728x90
header를 만들고 그안에 카테고리를 누르면 이동하는 화면을 구현하려고 했다.
근데
useNavigate() may be used only in the context of a <Router> component.
에러가 계속 발생했다.
찾아보니
header의 위치 때문이라는 것 같다.
useNavigator는 React Router의 컴포넌트 내에서만 useNavigate()를 사용해야 한다는 것이다.
즉, 컴포넌트가 없는 경우 useNavigate()를 사용할 수 없다.
원래 상태는 이렇게 되어있었다.
import App2 from "./App2";
import Header from "./Header";
import Footer from "./Footer";
// import Movie from "./components/Movie";
function App() {
return (
<>
<Header />
<App2 />
<Footer />
</>
);
}
export default App;
근데 여기서 라우터 밖에 헤더가 위치해 있는게 문제 인것 같았다.
그래서 라우터 밖에 위치한 header를 사용하는 페이지에 위치시켰다.
(Home컴포넌트로 이동시켰다.)
import axios from "axios";
import { useEffect, useState } from "react";
import Movie from "../components/Movie";
import styled from "styled-components";
import Header from "../Header";
const Containered = styled.div`
/* border: 10px solid black; */
`;
const TotalMained = styled.div`
display: flex;
flex-direction: column;
`;
const EachMained = styled.div`
/* border: 10px solid red; */
/* display: flex;
flex-direction: row; */
`;
function Home() {
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
useEffect(() => {
axios
.get(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year"
)
.then(res => {
setMovies(res.data.data.movies);
console.log(res.data.data.movies);
setLoading(false);
})
.catch(err => console.error(err));
}, []);
return (
<>
<Header />
<Containered>
{loading ? (
<h1>Loading......</h1>
) : (
<div>
<TotalMained>
{movies.map(movie => (
<EachMained>
<Movie
key={movie.id}
id={movie.id}
coverImg={movie.medium_cover_image}
title={movie.title}
summary={movie.summary}
genres={movie.genres}
/>
</EachMained>
))}{" "}
</TotalMained>
</div>
)}
</Containered>
</>
);
}
export default Home;
그랬더니 오류가 발생하지 않고 잘 되었다 !!!
728x90