How to get key value from url

Question

I am using Axios to fetch data from API. From one page I am sending data through URL to another page which I want to use on another page.

http://localhost:3000/otp?email=test.k@gmail.com

I want to get the value of email. In reacting project I am using react-router-dom, Axios, hooks.

score 2 · Answer 1 · answered Sep 29 '21 at 13:21

2

One solution using hooks:

import { useLocation } from 'react-router-dom'

const location = useLocation()
const email = new URL(location.href).searchParams.get('email')

answered Sep 29 '21 at 13:21

morganney

2,491
1
18
23

score 1 · Answer 2 · answered Sep 29 '21 at 13:22

1

You can use VanillaJS

const params = new URLSearchParams(window.location.search)
const email = params.urlParams.get('email');
console.log(email)

answered Sep 29 '21 at 13:22

Maik Lowrey

10,972
4
14
43

score 0 · Answer 3 · answered Sep 29 '21 at 13:21

0

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

You should use like below

answered Sep 29 '21 at 13:21

n-ata

913
2
24

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Sep 29 '21 at 13:43

score 0 · Answer 4 · answered Sep 29 '21 at 13:31

You can use useLocation hook from react-router-dom, for example:

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

const Component = () => {
  const query = new URLSearchParams(useLocation().search);

  return <div>{query.get('email')}</div>
}

It's also important to know the difference between params and queries in the routes.

How to get key value from url

4 Answers4