[Bug]: useParams type always adds undefined

[amir-beheshty]

What version of React Router are you using?

6

Steps to Reproduce

1. Run below code
2. Notice the token type is string | undefined
3. Similarly, token2 type is string | null | undefined

It seems that the Params type is extended to always include undefined.

(also, for some reason interface does not work!)

import React from 'react';
import {
  useParams,
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

type Params = {
  token: string;
  token2: string | null;
};

const Token = () => {
  const { token, token2 } = useParams<Params>();
  return <p>token: {token}</p>;
};

const router = createBrowserRouter([
  {
    path: '/:token',
    element: <Token />,
  },
]);

export const App = () => {
  return (
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  );
};

Expected Behavior

The supplied type/interface for useParams should not be extended to include undefined.

Actual Behavior

The supplied type/interface for useParams is always extended to include undefined.

[hjonasson]

This is an interesting point. If token would be undefined that would mean your route wasn't /:token🤔 . I am curious to see what comes out of this.

Note that you should not expect to get token2 from your useParams hook as it is not defined on your route.

[amir-beheshty]

Note that you should not expect to get token2 from your useParams hook as it is not defined on your route.

Correct. I used token2 to illustrate that token and token2 including undefined type is confusing. Clearly token2 should be undefined but token should always be string in the provided example.

[brophdawg11]

This is expected because React Router cannot be sure in what context you're calling useParams - see this original PR for context: #8019.

It's worth noting that we are aware that React Router and Remix are not as type-safe/type-inferred as they could be and that's something we're actively thinking about when considering future Remix verisons/APIs. This would include Remix SPA mode - the bridge we're building to ensure React Router apps have a smooth path to get all the latest goodies as well.

[hjonasson]

Thanks @brophdawg11 . That's a good explanation, that useParams will only work as expected when used as expected which is very easy to mess up.

Love the SPA mode. I have always had to build the code splitting :D