reactjs - 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>
  );
}

question from:https://stackoverflow.com/questions/65932902/extract-value-from-url-using-react-router

Answer 1

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"