[에러] useNavigate() may be used only in the context of a <Router> component.

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;

 

그랬더니 오류가 발생하지 않고 잘 되었다 !!!