Reactjs how to add variable in URL parameter

Question

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!

Drew Reese · Accepted Answer · 2022-01-06 17:59:08Z

0

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");

answered Jan 6, 2022 at 17:59

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactjs how to add variable in URL parameter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related