即使 id 存在于 React Router 的 params 对象中，也无法定义 id

Question

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


// helper function for async task

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;
}




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

我正在尝试通过 id 获取特定用户。在我的加载程序中，参数有 userId 以及其他数据。但是当我尝试将它传递给负责数据获取的辅助函数时，我发现它未定义。它给了我这样的错误

“helpers.js?t=1694052786647:37 GET https://api.stackexchange.com/2.3/users/undefined?pagesize=50&site=stackoverflow&key=Yop5T7opvZcqG255X2YmsQ(( 400（错误请求）”。

请解决问题。

Answer 1

路由加载器函数采用具有

params

和

request

属性的单个参数对象。你应该从这个论点中解构

params

。

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

Answer 2

问题似乎出在 createBrowserRouter 中。在 React Router 中，路由是从上到下评估的，并且将使用与 URL 匹配的第一个路由。如果 /users/:userId 之前有 /users 这样的路由，它将匹配 /users/123 这样的 URL 的 /users 路由，因为 /users 也是 /users/123 的前缀。

所以要解决这个问题，你应该有这样的东西：

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