在loader中使用URL参数时出现错误

Question

我在我的 React 项目中使用 React-Router。我有一个如下所示的移动页面：

import React from "react";
import axios from 'axios'

export async function loader({ params }) {
  const movieId = params.movieId;  // Fix the variable name here
  const movie = await axios.get('http://localhost:3000/movies/' + movieId);
  return { movie };
}

function Singlemoviepage(props) {
  return (
    <main>
      <h1>single movie page</h1>
    </main>
  )
}

export default Singlemoviepage

我的路由器看起来像这样：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Moviesroute />,
    errorElement: <Errorpage />,
    children: [
      {
        path: "Movies",
        element: <Moviespage />


      },
      { path:"/",
       element:<Homepage />,
       loader: Homeloader

      },
      {
        path: 'Movies/:movieid',
        element: <Singlemoviepage />
      }
    ]
  },

]);

我在访问

"/movie/movieId"

路线时收到以下错误。

Answer 1

您应该使用“useLoaderData”挂钩。 https://reactrouter.com/en/main/hooks/use-loader-data

👉但我建议你先按照这个教程学习，否则你会一无所知。不要着急（初学者友好） https://reactrouter.com/en/main/start/tutorial