React Router Param with token having forward slash

I am using Identity Framework to generate password reset tokens that have / in the token

e.g.

http://localhost:3000/reset/CfDJ8Gnkh7D2epVEspI7K8JRxtKUjYdzndyduSAhrrg7LjshyYkTwbxzYr3E9CPxBcsPLoocEjplmvaV/Qjug+ez2Kwb0USdwdWMzQm4zJuWiZ1U9+ITrWeUdskiHO9QbdFnfQ/4+ME3TuItAKza0ZrYvi+46f3eiSKVhhe9LhGNWKQRB0KToAMQn7pE1gijIhc5wdPsA+jCCb5ebvDFYIeqo2Yvl/AAuehhpE1mTOWi4alw

How to setup below route path to accept the complete string as token. Below does not seem to work

 {
        path: '/reset/:token*',
        element: <ResetSetup />,        
    }

or
 {
        path: '/reset/:token',
        element: <ResetSetup />,        
    }

The "/" character splits path segments, so if a route path parameter value contains this literal character then the entire value won't be captured. The route path can be tweaked a bit to either consume everything after "/reset/" as a splat, e.g. "/reset/*":

<Route path="/reset/*" element={<ResetSetup />} />

import { useParams } from "react-router-dom";

const ResetSetup = () => {
  const { "*": token } = useParams();

  return (
    ...
  );
};

This obviously only works if the token value is the final path segment. It won't work if the path was something like "/reset/<token value>/someOtherSegment".

You could encode the token value in a URL-safe way so the entire token value is a single path segment, which would allow for more dynamic path variations:

<Link to={`/reset/${encodeURIComponent("CfDJ8Gnkh7D2epVEspI7K8JRxtKUjYdzndyduSAhrrg7LjshyYkTwbxzYr3E9CPxBcsPLoocEjplmvaV/Qjug+ez2Kwb0USdwdWMzQm4zJuWiZ1U9+ITrWeUdskiHO9QbdFnfQ/4+ME3TuItAKza0ZrYvi+46f3eiSKVhhe9LhGNWKQRB0KToAMQn7pE1gijIhc5wdPsA+jCCb5ebvDFYIeqo2Yvl/AAuehhpE1mTOWi4alw")}`}>
  Reset Password (URI Encoded)
</Link>

<Route path="/reset/:token" element={<ResetSetup />} />

const ResetSetup = () => {
  const { token } = useParams();

  return (
    ...
  );
};

Demo

What about adding a + to your Route path ?

 {
    path: "/reset/:token+",
    element: <ResetSetup />,        
}

I had this same issue. What I did was encode/decode the URL part that contains slashes. React-router will take the encoded string as a param where you can decoded it later to return the slashes and use as needed

So you can keep:
path='/reset/:token'

This will mean what ever takes you to this path will need to encode (encodeURIComponent) the token. Then when you useParams to get the token you may need to decode (decodeURIComponent) the token. I say may because I believe react-router will decode it in-flight