javascript - 错误: React Hook "useRouter" - nextJs/javascript app not building

Question

我正在使用 nextJS 并在这里遇到了一个小问题，并且不确定我哪里出了问题。我已经构建了一个应用程序，一切都可以在开发中运行。但是，我正在尝试构建我的应用程序，但收到错误:

./pages/genre.js/[genre].js

13:18 Error: React Hook "useRouter" is called in function "genre" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

useRouter 位于我的名为 [genre].js 的页面上，详细代码如下:

import React from "react";
import { useRouter } from "next/router";
import useFetchMovieGenreResults from "../../hooks/useFetchMovieGenreResults";
import { useState } from "react";
import useFetchTrendingCatagory from "../../hooks/useFetchTrendingCatagory";
import useFetchTopRatedCatagory from "../../hooks/useFetchTopRatedCatagory";

export default function genre() {
  const router = useRouter();
  const { genre } = router.query;

    
  if (genre == "Trending") {
    let mymovies = useFetchTrendingCatagory();

    return (
      <div>
        {/* <Navbar /> */}
        <div>{genre}</div>
        <Moviegenreresults movies={mymovies} />
      </div>
    );
  } else if (genre == "Top Rated") {
    let mymovies = useFetchTopRatedCatagory();

    return (
      <div>
        {/* <Navbar /> */}
        <div>{genre}</div>
        <Moviegenreresults movies={mymovies} />
      </div>
    );
  } else {
    let mymovies = useFetchMovieGenreResults(genre);

    return (
      <div>
        {/* <Navbar /> */}
        <div>{genre}</div>
        <Moviegenreresults movies={mymovies} />
      </div>
    );
  }

Nextjs官方建议使用useRouter来访问URL参数

为什么会出现这个错误？我缺少什么？有什么解决方法吗？

更新

我正在尝试使用下面的解决方案。

import React from "react";
import { useRouter } from "next/router";
import useFetchMovieGenreResults from "../../hooks/useFetchMovieGenreResults";
import { useState } from "react";
import useFetchTrendingCatagory from "../../hooks/useFetchTrendingCatagory";
import useFetchTopRatedCatagory from "../../hooks/useFetchTopRatedCatagory";

const useMovies = (genre) => {
  switch (genre) {
    case 'Trending':
      return useFetchTrendingCatagory()
    case 'Top Rated"':
      return useFetchTopRatedCatagory()
    default:
      return useFetchMovieGenreResults(genre)
  }
}

export default function Genre () {
  const router = useRouter();
  const { genre } = router.query;
  const mymovies = useMovies(genre)

  return (
    <div>
      {/* <Navbar /> */}
      <div>{genre}</div>
      <Moviegenreresults movies={mymovies} />
    </div>
  )
}

但是，我在尝试构建代码时仍然遇到以下错误

**./pages/genre.js/[流派].js15:14 错误:React Hook“useFetchTrendingCatagory”被有条件地调用。 React Hooks 必须在每个组件渲染中的顺序完全相同。您是否在提前返回后不小心调用了 React Hook？ react 钩子(Hook)/钩子(Hook)规则

17:14 错误:React Hook“useFetchTopRatedCatagory”被有条件地调用。 React Hooks 必须在每个组件渲染中的顺序完全相同。您是否在提前返回后不小心调用了 React Hook？ react 钩子(Hook)/钩子(Hook)规则

19:14 错误:React Hook“useFetchMovieGenreResults”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用。您是否在提前返回后不小心调用了 React Hook？ react 钩子(Hook)/钩子(Hook)规则**

switch 语句不会被视为条件渲染吗？有什么解决办法吗？

Answer 1

您只需将组件重命名为以大写字母开头，即 Genre。原因是组件必须以大写字母开头，并且只有组件和钩子(Hook)才能使用钩子(Hook)(例如 useRouter)

export default function Genre()

对于钩子(Hook)问题，你不能有条件地调用钩子(Hook)或在 block 内调用它们，它们很像导入语句，它们需要在其父级的顶部调用(对于钩子(Hook)，父级将是函数，即您需要在组件/函数顶部调用钩子(Hook))。为了仍然执行您想做的操作，您可以使用三元运算符 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator ) 有条件地传入参数，而不是有条件地调用 Hook 。我建议阅读钩子(Hook)模式( https://www.patterns.dev/posts/hooks-pattern/ ):

  const router = useRouter();
  const { genre } = router.query;
  // instead of calling the hook conditionally, change the parameter you're calling in the hook conditionally, this will fix the error you're getting with regards to conditionally calling hooks

  const mymovies = useFetchTrendingCategory(genre == "Trending" || genre == "Top Rated" ? undefined : genre)

    return (
      <div>
        {/* <Navbar /> */}
        <div>{genre}</div>
        <Moviegenreresults movies={mymovies} />
      </div>
    );