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

Question

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 ?

Answer 1

You don't need to add the question mark to the route path. React Router automatically parses the query parameters, and then you can use and validate the query params, like so:

import { useSearchParams } from 'react-router-dom'
...
const [queryParams, setQueryParams] = useSearchParams()
if (!queryParams.uidb64 && !queryParams.token) {
    return <h1>Error</h1>
}
...

Or something like that. That's just an example.

Answer 2

If you have already implemented a button for each, you've almost finished.

Every ListBox have to be bound with a List of Client, showing a specific property as DisplayMember.

The button of each ListBox can sort the List and refresh all of the ListBoxes. If you want more information, please post some of your code.