react-router-dom: how to create route with regex capture groups in url and get them in the component - react-router-dom

Question

I want to create a page in reactjs for the following regex url
^rest-auth/password-reset/confirm/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$
And i want to capture uidb64 and token in my component
Can any one guide how to write route with regex
I am using the
"react-router": "^5.2.0",
"react-router-dom": "5.2.0",
"react-dom": "16.13.1",
"react": "16.13.1",
currently i have
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import Login from "./views/User/Login";
import Signup from "./views/User/SignUp";
import ForgotPasswordSendEmail from "./views/User/ForgotPasswordSendEmail";
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} />
<Route path="/forgort-password-send-email" component={ForgotPasswordSendEmail} />
<Redirect from="/" to="/login" />
</Switch>
</Router>,
document.getElementById("root")
);
Now i want to add a Component called ResetPassword something like below
import ResetPassword from "./views/User/ResetPassword";
<Route path="/rest-auth/password-reset/confirm/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$" component={ResetPassword} />
and my ResetPassword Component looks like
import React, { useState, useEffect } from "react";
export default function ResetPassword() {
// Here how to capture the urls capture groups
// and then store then as follows
const uid = uid64;
const token = token;
return (
<div>
{uid} -- {token}
</div>
}
HOw to do routing with regex capture groups and how to get them in my component.

Answer 1

To Capture regex groups we have to use /name:regex and use useParams hook
<Route path="/rest-auth/password-reset/confirm/uidb64:([0-9A-Za-z_\-]+)/token:([0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$" component={ResetPassword} />
and inside ResetPassword
import React, { useState, useEffect } from "react";
import {useParams} from 'react-router-dom'
export default function ResetPassword() {
let params = userParams()
const uid = params.uid64;
const token = params.token;
return (
<div>
{uid} -- {token}
</div>
}