React Router中params含userId但获取时为undefined的问题

问题场景 #

尝试通过ID获取特定用户数据，React Router对应路由/users/:userId的loader函数中，传入数据获取辅助函数的userId为undefined，导致请求Stack Exchange API时出现400错误，请求URL中userId字段显示undefined。

相关代码 #

路由配置代码 #

import { RouterProvider, createBrowserRouter } from "react-router-dom"
import AppLayout from "./ui/AppLayout"
import Questions, {loader as questionsLoader} from './features/questions/Questions'
import Companies from './features/companies/Companies'
import Users, {loader as usersLoader} from './features/users/Users'
import Tags from './features/tags/Tags'
import Error from './ui/Error'
import User, {loader as userLoaderById} from "./features/users/User"

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    errorElement: <Error />,
    children: [
      {
        path: '/questions',
        element: <Questions />,
        loader: questionsLoader,
        errorElement: <Error />
      },
      {
        path: '/companies',
        element: <Companies />
      },
      {
        path: '/users',
        element: <Users />,
        loader: usersLoader,
        errorElement: <Error />
      },
      {
        path: '/users/:userId',
        element: <User />,
        loader: userLoaderById,
        errorElement: <Error />
      },
      {
        path: '/tags',
        element: <Tags />,
        // loader: tagsLoader,
        // errorElement: <Error/>
      }
    ]
  }
])

function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App

数据获取辅助函数 #

export async function getDataById (id) {   
   let res = await fetch(`${BASE_URL}/users/${id}?pagesize=50&site=stackoverflow&key=${API_KEY}`);      
   if(!res.ok) throw new Error(" Oops! Targer user's record not found 😔")
   let { items } = await res.json();
   return items;
}

User组件及loader函数 #

import { useLoaderData } from "react-router-dom"
import { getDataById } from "../../utils/helpers";

const User = () => {
  const data = useLoaderData()
    
  return (
    <div>User</div>
  )
}

export async function loader(params) {
  console.log(params.userId);
    
  let userData = await getDataById(params.userId);    
  return userData
}

export default User

错误信息 #

helpers.js?t=1694052786647:37 GET https://api.stackexchange.com/2.3/users/undefined?pagesize=50&site=stackoverflow&key=Yop5T7opvZcqG255X2YmsQ(( 400 (Bad Request).

修复方案 #

React Router v6中，loader函数的参数是一个包含params、request等属性的对象，并非直接的params对象。原代码中直接访问params.userId会取不到值，需要通过解构或层级访问获取路由参数：

修改后的loader函数（解构写法）：

export async function loader({ params }) {
  console.log(params.userId);
  
  let userData = await getDataById(params.userId);    
  return userData
}

或者不使用解构的写法：

export async function loader(props) {
  console.log(props.params.userId);
  
  let userData = await getDataById(props.params.userId);    
  return userData
}

这样就能正确获取到路由中的userId参数，避免API请求出现undefined的情况。

内容的提问来源于stack exchange，提问作者Majid Ali