react router v6 doesn't work if a question mark is attached to url

So the situation i’m in , i have a link that’s sent through our backend to the user which he tries to access to reset his password , that link’s path is : https://randomwebsite.com/reset-password/?uidb64=value&token=value
my route component and 404 route component look like this:

    <Route
      path="/reset-password/?:uidb64:token"
      element={<ResetPasswordCodeConfirmation />}
    />

    <Route path="*" element={<Error404Page />} /> 

if i try to visit the link above ( https://randomwebsite.com/reset-password/?uidb64=value&token=value) i get to the 404 page , if i remove the question mark from both my route and link , it works out fine and the link goes to the reset password component but i need to tell react router that it needs to accept a question as this is the link that’s getting to the user , any idea ?

>Solution :

There is two different things here:

• Query params (Which your backend has for this end points) and it means adding values after the ? character with & if you have multiple values
• Route params (Which you attempted to add in your route component using the character :) and it means actually a totally different route with / separating it, for ex: <Route path="/reset-password/:token" /> means all https://randomwebsite.com/reset-password/AnyThingHereThatYouCanAccessLaterAsToken

So, your link should remain the same, and your Route component should look like this:

    <Route
      path="/reset-password"
      element={<ResetPasswordCodeConfirmation />}
    />

I think this link has a good example of the same situation.