How can I define the return type for a React Router v6 loader?-CodePudding

I'm using loaders with the new react-router-dom and when I use the useLoaderData hook in the component, the response type is unknown, so I can't use it. I don't want to use the as type definition as I feel like that's kind of cheating but if that's the only way, then, please let me know:

My loader function:

{
      path: "/reset-password/:resetToken",
      element: <ResetPassword />,
      loader: async ({ params }) => {
        if (!params.resetToken){
          return null
        }
        const fakeTokens = ["abcdef123456", "bingbong", "foobar"]

        // make API call to check if the given token is valid
        const fakeAPICall = (resetToken: string) : Promise<object> => {
          if (fakeTokens.includes(resetToken)){
            return new Promise(resolve => resolve({ success: true }))
          }

          return new Promise(resolve => resolve({ success: false }))
        }
        
        const resp = await fakeAPICall(params.resetToken);

        return resp;
        
      }
},

Inside the <ResetPassword />:

// this type is "unknown", so I can't access the properties on it
const resetTokenResponse = useLoaderData()

CodePudding user response：

The useLoaderData hook's return type is unknown, so you'll need to re-type it in the component.

See