The link from my backend produce ?id= for my frontend to parse using queryString. Is there a way to get this link to load in the frontend?
http://localhost:3000/resetpassword/?id=61bc1fbe3490be4f3594cc3e/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MWJjMWZiZTM0OTBiZTRmMzU5NGNjM2UiLCJmaXJzdG5hbWUiOiJPY2VhbiIsImxhc3RuYW1lIjoiUnlhbiIsImVtYWlsIjoib2NlYW5yeWFuNzI1QHlhaG9vLmNvbSIsInBob25lTnVtYmVyIjo2MjgxMTYxNTIyNjMyLCJkb2IiOiIyMDAwLTA3LTI1VDAwOjAwOjAwLjAwMFoiLCJwYXNzd29yZCI6IiQyYiQxMCR6Li9hMHFQYVFzdnNCUEtxc2QuaENlWmI3OWpIYW1VdHdXNmVnSEpLLlhndHFGZzV3djJ0bSIsIl9fdiI6MH0.21irj8fCPQFvCqmp-3E9BJmqwVp81gyQxIW5LgFplMg
App.js
import './App.css';
import { BrowserRouter,
Routes,
Route,
} from "react-router-dom"; //v6
import LandingPage from "./pages/LandingPage/LandingPage";
import ResetPwPage from "./pages/ResetPwPage/ResetPw";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<LandingPage/>}/>
<Route path="/resetpassword/:id/:token" element={<ResetPwPage/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
I tried
<Route path="/resetpassword/?id=:id/?token=:token" element={<ResetPwPage/>} />
But it doesnt work.
I need the link to contain ?id= and ?token= since i need to get the value of id and token in the frontend as required with queryString.
const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
Any suggestion or alternatives is much appreciated. Thank you!
In react-router-dom the router and routes/paths don't concern themselves with the queryString, they only care about the path part of the URL. In RRDv6 there is a new useSearchParams hook for accessing and reading from the queryString.
path
/resetpassword/?id=61bc1fbe3490be4f3594cc3e&token=eyJ0eX.....
Remove the bits from the path that was trying to read the queryString.
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<LandingPage/>} />
<Route path="/resetpassword" element={<ResetPwPage/>} />
</Routes>
</BrowserRouter>
);
}
ResetPwPage
import { useSearchParams } from 'react-router-dom';
...
const [searchParams] = useSearchParams();
...
const id = searchParams.get("id");
const token = searchParams.get("token");