extract value from url using react router

Question

I have a URL link and I want to extract the value from that URL I am using react-router to access the value and here is the link of URL <test/?salesoff=S4&salesdist=District%201&custname=C2&product=P2&productgroup=PG-1> so using that URL I want to access each value and pass to data in the form fields and I am passing in routes path but I don't get any value here is my code I am passing

function App() {
  return (
    <React.Fragment>
      <Router>
        <div className="imageStyle">
          <Switch>
            <Route exact path="/salesoff/:id/salesdist/:id/custname/:id/product/:id/productgroup/:id" component={Form} />
          </Switch>
        </div>
      </Router>
    </React.Fragment>
  );
}

Here is Form component where I am passing each value in input text field

export default function FormDesign() {
  axios.get('/url', {
  })
  .then(function (response) {
    console.log(response);
  })
const handleChange = (event) => {
    setCurrency(event.target.value);
  };

  const onSubmit = (data) => console.log(JSON.stringify(data));
  return (
    <div>
      <Grid>
        <Grid item xs={12} lg={6}>
          <Card>
          
            <Container component="main" fixed>
                <form
                  className={classes.form}
                  noValidate
                  onSubmit={(e) => onSubmit(e)}
                >
                  <Grid container spacing={4}>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        autoComplete="fname"
                        name="salesoffice"
                        variant="outlined"
                        fullWidth
                        id="salesofice"
                        label="Sales office"
                        
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        type="text"
                        variant="outlined"
                        fullWidth
                        id="lastName"
                        label="Billing document"
                        name="lastName"
                        autoComplete="lname"
                      />
                     
                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                  >
                    Submit
                  </Button>
                  <Grid container justify="flex-end">
                    <Grid item></Grid>
                  </Grid>
                </form>
              </div>
              
            </Container>
          </Card>
        </Grid>
      </Grid>
    </div>
  );
}

the route I am passing is the correct method to pass in react-router? — Ayush Kumar
– Ayush Kumar, Commented Jan 28, 2021 at 9:01

Drew Reese · Accepted Answer · 2021-01-28 09:25:19Z

4

Issue

The Route's path prop only specifies route params, not query string parameters.

For example, for path="/root/:id" if a user were to navigate to "/root/test", then inside a component you could access the route params from the match object. Something like the following:

const { id } = props.match;
console.log(id); // "test"

Even if a user navigated to "/root/test?qp1=hello&qp2=world" the route params would still only pick up id from the path.

You also can't assign the same match param to multiple path segments. path="/salesoff/:id/salesdist/:id/custname/:id/product/:id/productgroup/:id" can't/shouldn't all assign to match.params.id.

Solution

You can, however, get the entire query string from the location object, and in this case it is the whole query string as a single string. Given the same path from before, "/root/test?qp1=hello&qp2=world", then you can access the query string as follows:

const { search } = useLocation();
console.log(search); // "?qp1=hello&qp2=world"

It's up to you to now parse the query string if you want to access specific key-value pairs.

const { search } = useLocation();
const urlParams = Object.fromEntries([...new URLSearchParams(search)]);
console.log(urlParams); // { qp1: 'hello', qp2: 'world' }

Demo

Demo with your code and URL "/?salesoff=S4&salesdist=District%201&custname=C2&product=P2&productgroup=PG-1"

edited Jan 28, 2021 at 9:25

answered Jan 28, 2021 at 9:03

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

7 Comments

Ayush Kumar Over a year ago

Thanks, @Drew Reese for answering but the value I am getting I will pass in match.params.id in my Form component in every inputText fields to match the value from url

Drew Reese Over a year ago

@AyushKumar Ok sure, but the live URL you shared above has a path of "/" so there won't be any match.params to access. All the data is in the query string which you need to consume and process. Then you can pass these values on to your form's input fields. Did you test out my linked codesandbox with your path pre-loaded?

Drew Reese Over a year ago

@AyushKumar Hmm, seems codesandbox is lopping off all but one of the specified query parameters when it loads, but if you manually append the query string to the address bar in the sandbox you should see the console log of the processed query string object.

Drew Reese Over a year ago

@AyushKumar All your form's fields are uncontrolled inputs, Just process the urlParams result value and go to each input and pass a defaultValue prop, i.e. something like defaultValue={urlParams.salesoff}. I forked your sandbox and this works in it, except for the product and productGroup inputs which appear to accept an integer value for a selected index, but this is also easy to figure out. Main thing here is passing the pared query parameter values to the defaultValue prop for the matching fields.

Drew Reese Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

extract value from url using react router

1 Answer 1

Issue

Solution

Demo

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Demo

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related