React Router中使用URL Params在Loader时出现解构错误如何解决？

1. 修复Loader函数的返回值 #

你的loader函数错误地将movieId作为movie字段返回，而非请求到的电影数据，同时要确保返回正确的数据结构：

export async function loader({params}){
    const movieId = params.movieId
    const res = await axios.get('http://localhost:3000/movies/'+movieId)
    const movie = res.data
    
    // 返回请求到的电影数据，而非movieId
    return {movie}
}

2. 为路由配置关联Loader #

movies/:movieId路由未指定loader属性，导致React Router不会调用该loader，useLoaderData()会返回undefined，解构{movie}时触发错误。修改路由配置：

// 注意导入SingleMoviePage和对应的loader
import SingleMoviePage, { loader as singleMovieLoader } from './path/to/SingleMoviePage';

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout/>,
    errorElement: <ErrorPage/>,
    children: [
      {
        path: '/',
        element: <HomePage/>,
        loader: homeLoader
      },
      {
        path: 'movies',
        element: <MoviesPage/>,
      },
      {
        path: 'movies/:movieId',
        element: <SingleMoviePage/>,
        loader: singleMovieLoader // 添加该行关联loader
      }
    ]
  },
]);

错误原因说明 #

• 路由未关联loader时，useLoaderData()返回undefined，尝试解构undefined的movie属性会触发Cannot destructure property 'movie' of ...错误。
• 原loader返回movieId而非实际电影数据，即便修复路由关联，组件也无法拿到正确的电影信息，因此需同时修正返回值。

内容的提问来源于stack exchange，提问作者Sachin Titus