ReactJS Read URL parameters

Question

I am using react-router-dom and according to docs it says for url pattern https:\\example.com\user\:id\:gender we can use useParams() hook to read the patters like

import {useParams, Route} from react-router;

<Route exact path="/user/:id/:gender" component={User}/>

const user=(props)=>{
const params = useParams()
}

//params = {id:'1',gender:'f'}; output for url pattern >>> https:\\example.com\user\1\f

But in my case, I have two requirement

gender field is sometime required and some time not, then what changes needed in the Router?
How to read url pattern https://example.com/user?id=1&gender=f , because in this patter If I interchange the order then no effect will be on parameter object.

Harsha Abeyvickrama · Accepted Answer · 2021-09-24 12:17:21Z

0

You can destructure the params as follows and use them anywhere

const { id , gender } = useParams();

answered Sep 24, 2021 at 12:17

Harsha Abeyvickrama

687 bronze badges

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

1 Comment

sanghmitra Over a year ago

Thanks for reply, I need something else, there is difference between two pattern example.com/user?id=1&gender=f and example.com\user\1\f how to read first one? @VH Aberyvickrama

Hammad A · Accepted Answer · 2021-09-24 12:19:56Z

0

You need to use query params if you are trying to append optional data in URL as you discussed above.

you can simply use "useLocation()" hook provided by react-router-dom library to extract query params from any url.

// https://example.com/user?id=1&gender=f
import React from "react";

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

function QueryParamsDemo() {
  let query = useLocation().search;
  let getParams = () => console.log(query); // output will be {id:1,gender:"f"}
  return (
    <div>
      <button onClick={() => getParams()}>Get Param</button>
    </div>
  );
}

answered Sep 24, 2021 at 12:19

Hammad A

11 bronze badge

Collectives™ on Stack Overflow

ReactJS Read URL parameters

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related